vite中如何使用sass:math

4,204 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

最新版的sass,在使用除法时,使用"/"会有警告⚠️

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

第一种方法是降级sass版本

"sass": "~1.32.13""sass": "1.32.13"

第二种:

$ npm install -g sass-migrator
$ sass-migrator division **/*.scss

第三种是使用math

@use 'sass:math';

如果你使用的是vite,并且已经设置过如下代码会发现无论如何设置都提醒你要设置到最顶层

css: {    preprocessorOptions: {      scss: {        additionalData:          '@import "./src/assets/style/variable.scss";@import "./src/assets/style/utils.scss";'      }    }  },

那么我们需要写成

css: {    preprocessorOptions: {      scss: {        additionalData:          '@use "sass:math"; @import "./src/assets/style/variable.scss";@import "./src/assets/style/utils.scss";'      }    }  },

参考:

sass-lang.com/documentati…