Vue CLI CSS预处理程序选项：dart-sass VS节点-sass？

Question

当创建与CLI（v3.7.0）的新项目中，有之间进行选择的选项dart-sass或node-sass编译器。

它们之间如何进行比较，以比Vue docs中声明的更具体？

Sass性能技巧

请注意，使用Dart Sass时，由于异步回调的开销，默认情况下，同步编译的速度是异步编译速度的两倍。为了避免这种开销，您可以使用Fiber包从同步代码路径中调用异步导入程序。为此，只需将光纤安装为项目依赖项即可：

npm install -D fibers

还请注意，由于它是本机模块，因此在操作系统和构建环境上可能存在兼容性问题。在这种情况下，请运行npm uninstall -D fibers以解决问题。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
? Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

Answer 1

根据sass-lang官方网站的说法：

Dart Sass是Sass的主要实现，这意味着它在任何其他实现之前都具有新功能。它快速，易于安装，并且可以编译为纯JavaScript，从而可以轻松集成到现代Web开发工作流中。

如果在Dart-VM内运行Dart-Sass，它的运行速度很快，但它表示可以编译为纯JS。的npmjs软件包dart-sass只是一个编译版本，比node-sass或慢native dart-sass。

如果您正在寻找测量值，我建议在这里阅读有关信息，其中有示例和不同的编号：

在包含16个导入Bootstrap框架实例的文件上运行：

• SASSC：0.820秒

• 脚本快照中的Dart Sass：1.558秒

• Dart Sass本机可执行文件：0.927s

• Node.js上的Dart Sass：3.129s基于这些数字，本机可执行文件中的Dart Sass大约为：

• 比libsass慢1.1倍

• 比Node上的Dart Sass快3.4倍

这是Dart Sass作为提前编译的本机代码运行的第一次测量，结果令人鼓舞。它远远低于微小文件的100ms阈值，并且在大多数测试用例中都可以与SassC媲美。SassC仍然在许多扩展的测试中处于领先地位，尽管只是很小的一部分，在我们的真实测试案例中仍然处于领先地位（尽管Dart Sass在其他案例中处于领先地位）。可以将这两种实现方式公平地描述为总体上具有相同的性能。

Node上的Dart Sass仍然比Dart VM上的速度慢得多，并且随着原始Dart代码变得更快，相对的速度变得更加明显。

我个人使用dart-sassnpmjs包而不是node-sass（js本机C库的包装）的个人经验dart-sass是（比起我，至少50倍，因为我有很多大型主题文件）要慢于node-sass。

Answer 2

24/01/2021

正如它在官方node-sass github doc 中所写 ， node-sass 已弃用。

警告：LibSass和节点萨斯被弃用。虽然他们将无限期地继续接收维护版本，但没有计划添加额外的功能或与任何新的 CSS 或 Sass 功能的兼容性。仍在使用它的项目应该转移到Dart Sass 上。

所以我想如果你计划长期或保持最新状态，最好选择 dart sass。

Answer 3

node-sass 可能比 dart-sass 更快，但在撰写本文时，dart-sass 是唯一实现该@use规则的库，强烈推荐在@import. 根据官方sass-lang 网站：

怎么了@import？该@import规则有许多严重的问题：

• @import使所有变量、mixin 和函数都可以全局访问。这使得人们（或工具）很难分辨出任何东西是在哪里定义的。

• 因为一切都是全局的，库必须为其所有成员添加前缀以避免命名冲突。

• @extend 规则也是全局的，这使得很难预测将扩展哪些样式规则。

• 每个样式表都会在每次@import编辑时执行并发出其 CSS ，这会增加编译时间并产生臃肿的输出。

• 无法定义下游样式表无法访问的私有成员或占位符选择器。

新的模块系统和@use规则解决了所有这些问题。

此外，@import将在未来几年逐步淘汰，并最终完全从语言中删除。

为了与 Sass 中的最佳实践保持同步，您现在应该使用 dart-sass（即sass）。