为什么要替换
1、因为node-sass和node.js版本关联太紧了,如果这两个版本不匹配,就会起冲突,导致项目无法运行;但是dart-sass 安装没有兼容性问题
2、sass官网团队也强烈建议使用dart-sass。
Sass 官方团队正式宣布 Libsass 将弃用,以及基于它的 Node Sass 和 SassC,并且建议用户使用 Dart Sass。
3、node-sass仓库在墙外, 且新特性都会先在dart-sass实现
Sass团队官宣
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
// npm
npm uninstall node-sass
// yarn
yarn remove node-sass
安装dart-sass
// npm
npm install --dev sass
// yarn
yarn add sass --dev
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)
dart-sass优势
不存在依赖二进制文件即可完成安装,避免了node-sass因为依赖其他文件而失败
允许使用sass和css新特性
避免工程其他依赖升级的不兼容node-sass导致报错的问题
dart-sass缺陷
性能:由于node-sass使用C++实现的样式预处理器,速度相比于纯Javascript实现Dart Sass要快
内存:执行编译过程中,Node Sass的内存占用也比Dart Sass要小很多
注意:在替换完Node Sass后,需要用::v-deep代替/deep/和>>> (注:如果在css中直接这么写是没用作用的) 来进行样式穿透。最重要原因是 vue 3.0 RFC中指定的写法,我们这么写之后可以尽量的最大程度减少升级到Vue3的复杂度。
// 实例:
.a {
>>> {
.b {
color: red;
}
}
}
/* 或者 */
.a {
/deep/ {
.b {
color: red;
}
}
}
/* 修改为 */
.a {
::v-deep {
.b {
color: red;
}
}
}
参考文档:
继往开来的 sass 三代编译器:ruby sass、node-sass、dart-sass
Node Sass 弃用,以 Dart Sass 代替 原创
Sass 官方团队正式宣布 Libsass 将弃用,以及基于它的 Node Sass 和 SassC,并且建议用户使用 Dart Sass。
抛弃 node-sass,拥抱 dart-sass
继往开来的 sass 3 代编译器:ruby sass、node-sass、dart-sass