nodes-sass更换为sass(dart-sass)
"sass": "^1.70.0",
"sass-loader": "^7.1.0",
原因
2020年10月27日,Sass 官方团队正式宣布 Libsass 将弃用,以及基于它的 Node Sass 和 SassC,并且建议用户使用 Dart Sass
。如果在vue
脚手架搭建的项目中需要使用sass
,建议初始化时勾选sass
配置,自行安装,选择默认的就是dart-sass
。dart-sass
替代node-sass
根本原因:node-sass
无法下载特定版本的二进制依赖文件。
dart-sass
使用前需要注意几点:
dart-sass
和node-sass
都是用来将sass
编译成css
的工具,所以都依赖sass-loader
。但node-sass
与node.js
版本相关联,这就导致,一旦本地node.js
升级,就会出现node-sass
无法工作的情况npm
上的dart-sass
包已被弃用,直接更名为sass
dart-sass
不支持/deep/
,要改成::v-deep
安装dart-sass
卸载node-sass
yarn remove node-sass
安装dart-sass
yarn add sass -D
dart-sass与node-sass的区别
node-sass
是用 node(调用 cpp 编写的 libsass)来编译sass
dart-sass
是用 drat VM 来编译sass
node-sass
是自动编译实时的,dart-sass
需要保存后才会生效dart-sass
性能更好(也是sass
官方使用的),而且node-sass
依赖node版本,所以会出很多问题(node-sass:4.14.1,node:14.19.3可以正常使用,mac本node-sass
依赖python3,装机默认是python2.7,所以还需要下载python3)
sass 有6个实现,他们都是用来将sass
编译成css
的工具。
下边我们来专门说一下 sass
、dart-sass
和 node-sass
:
sass
是由ts
调用dart-sass
实现的工具类,来编译sass
(以前是由单纯的ts
实现的)dart-sass
是由dart
实现的,通过dart vm
运行dart
是编译sass
(在npm
可以看到该包已不被开放下载了),直接更名为sassnode-sass
是由node
调用 底层c++
实现的libsass
来编译sass
目前sass
官方主推的是 dart-sass
dart-sass优势
- 不存在依赖二进制文件即可完成安装,避免了node-sass因为依赖其他文件而失败
- 允许使用sass和css新特性
- 避免工程其他依赖升级的不兼容node-sass导致报错的问题
dart-sass缺陷
- 性能:由于
node-sass
使用C++
实现的样式预处理器,速度相比于纯Javascript实现Dart Sass
要快 - 内存:执行编译过程中,
Node Sass
的内存占用也比Dart Sass
要小很多
踩坑记录
(1)在写css中使用/
出的错
css语法里面已经添加了
/
作为分隔符的使用。sass作为css的超集,也会跟进这个改动,所以sass2.0的时候/
就会被弃用。 但是在calc函数里面仍然是有效的,也就是说,我们以后用除法的时候,直接在calc函数里使用,或者除2的时候改成*0.5就没有问题了。本来css就是只在calc
支持除法,所以问题不大。 官方给出的解决办法是math.div()
方法,当然官方不会让你一个一个修改,给出了批量修改工具。
安装sass-migrator
yarn add -g sass-migrator
批量修改
sass-migrator division **/*.scss
编译之前
margin-right: #{$--tooltip-arrow-size/0.55};
编译之后
margin-right: #{math.div($--tooltip-arrow-size, 0.55)};
(2)SassError: expected selector. /deep/
在写css中使用/deep/
出的错,将/deep/
替换成::v-deep
即可。
深度选择器 /deep/
和::v-deep
:
sass
只支持::v-deep
node-sass
支持/deep/
和::v-deep
全局搜索项目中的/deep/ 然后全部替换成::v-deep
(3)calc在特定情况需要带单位
调整前
width: calc(100% - 215);
调整后
width: calc(100% - 215px);
(4)each中循环的变量写法
主演是将&-#{$name}
调整为&-#{""+$name}
调整前
@each $name,
$color in $bright-colors {
&-#{$name} {
background-color: $color;
border: p2r(1) solid $color;
color: lighten($color: $color, $amount: 100%);
.iconfont {
color: lighten($color: $color, $amount: 25%);
}
&:hover {
background-color: darken($color: $color, $amount: 10%);
}
}
}
调整后
@each $name,
$color in $bright-colors {
&-#{""+$name} {
background-color: $color;
border: p2r(1) solid $color;
color: lighten($color: $color, $amount: 100%);
.iconfont {
color: lighten($color: $color, $amount: 25%);
}
&:hover {
background-color: darken($color: $color, $amount: 10%);
}
}
}