使用 Dart Sass 代替 Node Sass

Jul 08, 2019

如果你使用过 sass ,应该了解多年来 node-sass 一直是 JavaScript 社区里的主流选择,它实际上只是 libsass 在 node 环境下的一个 wrapper, 编译 sass 文件的实际工作是 libsass 完成的。

在使用 node-sass 过程中遇到的很多问题实际上也是 libsass 引发的,libsass 是用 C/C++ 实现的,常见的问题是,在安装 node-sass 的过程中经常会出现安装失败的情况,又或者切换了 Node.js 版本发现 node-sass 需要重新安装才能用,如果你在 docker 中安装 node-sass 还会遇到由于缺少各种依赖导致 node-sass build 失败的情况,又或者在国内由于网络原因导致 node-sass 需要的二进制文件下载不下来而 build 失败。

现在,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-sass,上面那些使用 node-sass 出现的问题就不会再遇到了,另外 dart-sass 和 node-sass 在暴露给用户的 API 方面是保持一致的,这表示几乎可以无痛迁移。

这里用 webpack 举例:

yarn remove node-sass
yarn add sass

修改 webpack 配置,在 sass-loader 的 options 里加一行 implementation: require('sass')

{
  loader: 'sass-loader',
  options: {
    implementation: require('sass'),    sourceMap: true
  }
}

这样就没问题了,使用上感受不到差异,不过再也不会遇到 node-sass 安装的各种问题了,性能方面,我在自己的项目里也进行了多次测试对比,从我的测试结果和 dart-sass 给出的 perf 来看,总体性能和 libsass 相比几乎一致,完全不用担心。