对比

背景

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 using node-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