对比
实现语言 | 包名 | 特点 |
---|---|---|
ruby | ruby-sass | - 高级语言 Ruby 实现更容易迭代 - 运行速度慢,不易安装 |
node / c++ | node-sass | - 底层使用的是 C/C++ 开发的 LibSass,运行速度快 - 迭代速度慢,无法快速地添加各种功能 |
dart | sass / dart-sass |
背景
node-sass 是过去的首选
如果你使用过 sass ,应该了解多年来 node-sass 一直是 JavaScript 社区里的主流选择,它实际上只是 libsass 在 node 环境下的一个 wrapper, 编译 sass 文件的实际工作是 libsass 完成的。
node-sass 带来的问题
在使用 node-sass 过程中遇到的很多问题实际上也是 libsass 引发的,libsass 是用 C/C++ 实现的。
常见的如下:
- 在安装 node-sass 的过程中经常会出现安装失败的情况
- 切换了 Node.js 版本发现 node-sass 需要重新安装才能用
- 在 docker 中安装 node-sass 还会遇到由于缺少各种依赖导致 node-sass build 失败的情况
- 国内由于网络原因导致 node-sass 需要的二进制文件下载不下来而 build 失败
简介
dart-sass 用 dart 语言编写而成。
正如官方所言,目前sass 官方已经使用 dart-sass 作为 sass 的主要实现:
Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It’s fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.
Dart的运行速度是真的快,对于大型样式文件,Dart Sass的处理速度是Ruby Sass的5~10倍,且只比LibSass慢1.5倍左右。
同时,Dart是一门具备静态类型的动态语言,对比C/C++甚至是Ruby,Dart相对更容易上手且代码也更易于编写和维护。
此外,Dart具备编译输出为JavaScript的能力,使得Dart Sass可以兼容NodeJS平台。
操作
移除 node-sass 依赖
npm uninsatll node-sass
yarn remove node-sass
安装 sass 与 sass-loader 依赖
这里的 sass 实际上的实现就是 dart,你可以将它视为 dart-saas
。
npm install sass sass-loader --dev
yarn add sass sass-loader --dev
编写 webpack 配置
在 VueCli 中编辑 vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
implementation: require('sass'), // This line must in sass option
},
},
}
//other code
};
在 Nuxt 中编辑 nuxt.config.js
module.exports = {
build: {
...
loaders: {
sass: {
implementation: require('sass')
},
scss: {
implementation: require('sass')
}
}
...
}
};
注意
/deep/ 选择器写法调整
在 dart-sass
实现版本中不能够像 node-sass
的实现那样用 /deep/
来做选择器。
应当替换为 ::v-deep
写法。
This will change/has changed, depending on your implementation of SCSS. If you’re using
dart-sass
then this will not work. You need to use::v-deep
instead GH comment. If you’re usingnode-sass
then you’ll be ok to continue using/deep/
until they catch up and remove support for it too.参考链接 https://juejin.im/post/5eda0620e51d4578a6797dc9 https://stackoverflow.com/questions/54124437/how-to-use-deep-selector-in-scss-in-vue