当我把Angular应用程序从11版迁移到12版时,我在执行ng build命令时得到了警告信息。
在迁移过程中,我在运行ng build命令时得到了以下警告信息:
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
建议:math.div($min-width, 2)
更多信息和自动迁移程序:https://sass-lang.com/d/slash-div
这个问题可能会出现,而且不仅仅是在升级angular框架的时候,在升级其他使用以下框架的应用程序的sass版本时也会出现:
- Reactjs
- Vuejs
- NuxtJS
- Bootstrap框架
- 任何在package.json中升级了sass依赖性的nodejs应用程序。
这个错误在dart sass中出现,但在node-sass中没有,总之libsass已经被废弃,不再使用了。 我的应用程序是使用sass服务器的Angular中等规模的应用程序
Angular应用程序使用的是sass 1.34 npm库版本。
"devDependencies": {
"sass": "~1.34"
}
让我解释一下现有代码中的警告是什么?
在一个sass文件中,first.scss
$min-width:800;
content{
width: $min-width/2;
}
在sass类中,我使用了除法运算符/来制作一半的宽度。当你用ngular的nodejs编译sass代码时,你会得到一个错误。
原因是sass的版本大于等于1.33.0。
解决这个问题的方法
- 使用math.div
- 用较早的sass版本编译sass文件
math模块的div功能
这个问题很容易解决,最新的sass提供的math模块有div功能。
math.div只在dart-sass版本支持,在node-sass版本不支持
@use "sass:math";
math.div in sass
$min-width:800;
content{
width: math.div($min-width, 2);
}
如果除法分离在许多代码中出现,你可以选择其他方法。
用旧的sass版本编译sass文件
在package.json中,请将版本从1.34改为1.32.12版本。
"devDependencies": {
"sass": "~1.32.12"
}
以下是要做的步骤
- 删除你的项目的node_modules
- 删除package_lock.json
- 再次运行npm安装命令
- 这样就安装了旧版本,并能正常工作
为什么SASS框架引入math.div代替除法运算符?
/ SASS中的运算符在不同地方使用
- 在数学计算中作为除法运算符使用
- 在css网格和rgl及hsl函数的网格行或网格列中作为分隔符使用
由于SASS比css先进,为了消除混乱,除法运算符将在未来的SASS版本中被删除,因此,SASS框架建议使用Math.div函数。