Angular:修复DartSass2中删除的使用/进行除法的问题的教程

300 阅读1分钟

当我把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中的运算符在不同地方使用

  1. 在数学计算中作为除法运算符使用
  2. 在css网格和rgl及hsl函数的网格行或网格列中作为分隔符使用

由于SASS比css先进,为了消除混乱,除法运算符将在未来的SASS版本中被删除,因此,SASS框架建议使用Math.div函数。