Node Sass to Dart Sass

在 v4.3.0之前本项目都是基于node-sass进行构建的，但node-sass底层依赖 libsassNode Sass to Dart Sass - 图1，导致很多用户安装的特别的困难，尤其是 windows 用户，它强制用户在windows环境中必须安装python2和Visual Studio才能编译成功。

所以为了解决这个问题，本项目在 v4.3.0Node Sass to Dart Sass - 图2修改为dart-sass进行构建，它能在保证性能的前提下大大简化用户的安装成本。通过这个 issueNode Sass to Dart Sass - 图3下面相关的评论就可以知道，安装 node-sass 是多么麻烦的一件事。

这里选择使用dart-sass还有一个更主要的原因，sass官方已经将dart-sass作为未来主要的的开发方向了，有任何新功能它都是会优先支持的，而且它已经在社区里稳定运行了很长的一段时间，基本没有什么坑了。dart-sass之所以容易安装，主要是因为它会被编译成纯 js，这样就可以直接在的 node 环境中使用。虽然这样它的运行速度会比基于 libsassNode Sass to Dart Sass - 图4的慢一些些，但这些速度的差异几乎可以忽略不计。整个社区现在都在拥抱dart-sass，我们没有理由拒绝！而且它的确大大简化了用户的安装成本。

目前vue-cli在选择sass预处理的时候也会默认优先使用dart-scss，相关 prNode Sass to Dart Sass - 图5

相关的说明可以见该篇文章： Announcing Dart SassNode Sass to Dart Sass - 图6

具体 dart-sass性能评测可见：Perf ReportNode Sass to Dart Sass - 图7

升级方案

升级也非常的简单，只需要两个步骤

  1. npm uninstall node-sass
  3. npm install sass -S -D

具体可见该： Pull RequestNode Sass to Dart Sass - 图8

不兼容

替换 node-sass 之后有一个地方需要注意，就是它不再支持之前 sass 的那种 /deep/ 写法，需要统一改为 ::v-deep 的写法。相关： issueNode Sass to Dart Sass - 图9

具体 demo：

  1. .a {
  2.   /deep/ {
  3.     .b {
  4.       color: red;
  5.     }
  6.   }
  7. }
  9. /* 修改为 */
  10. .a {
  11.   ::v-deep {
  12.     .b {
  13.       color: red;
  14.     }
  15.   }
  16. }

不管你是否使用dart-sass，我都是建议你使用::v-deep的写法，它不仅兼容了 css 的>>>写法，还兼容了 sass /deep/的写法。而且它还是 vue 3.0 RFCNode Sass to Dart Sass - 图10 中指定的写法。

而且原本 /deep/ 的写法也本身就被 Chrome 所废弃，你现在经常能在控制台中发现 Chrome 提示你不要使用/deep/的警告。

更多： scope css 写法Node Sass to Dart Sass - 图11