Vue CLI CSS预处理器选项: dart-sass VS node？

Question

在使用CLI (v3.7.0)创建新项目时，可以在dart-sass编译器和node-sass编译器之间进行选择。

它们之间如何比较，比在Vue文档中声明的更具体

Sass表演小贴士 注意，在使用Dart Sass时，由于异步回调的开销，在默认情况下同步编译的速度是异步编译的两倍。为了避免这种开销，您可以使用光纤包从同步代码路径调用异步进口商。要启用此功能，只需将光纤安装为项目依赖项： 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

编辑2020/01: Vue CLI4.2.2创建新项目仍建议将dart-sass作为node-sass之前的第一个选项。然而，这里已经确定，node-sass是更有表现力的选择，几乎没人用飞镖 (ccleve的评论)。

编辑2020/09:随着阿里巴赫拉米更新了他的广泛答案，dart-sass 是首选的选择，因为node-sass 被标记为不推荐的。

可惜的是，dart-sass在它是一个JS编译的版本，性能很差。然而，它的开发人员非常清楚这一点，并正致力于提高本期中所述的性能。

Answer 1

更新09/17/2020

随着这个答案每天都在上升，我想也许值得深入研究这个话题。

考虑sass-lang网站

Dart Sass是Sass的主要实现，这意味着它在任何其他实现之前都会获得新的特性。它快速，易于安装，并将编译成纯JavaScript，这使得它更容易集成到现代web开发工作流中。

Dart是快速的，但不是JS编译的版本。实际上，当我们说Dart-Sass时，有两种选择：

• Dart-Sass on Dart-VM
• NPM上的Dart-Sass，这是纯JS编译版本

我使用Node-Sass、Dart-Sass和Dart- Sass (JS)将Bootstrap 4 Sass文件编译为CSS，您可以看到以下结果：

​

​

• 在这种情况下，2秒并不是什么大不了的事情；但是考虑一下Dart-Sass(JS)比Dart sass(Dart)慢9倍，比节点sass慢3倍。
• 我有一个主题为+20的项目，花了30秒的节点-Sass，但我尝试使用Dart-Sass(JS)，它花了一个世纪！
• 虽然Dart-Sass(Dart VM)是最快的，但是安装或集成它有点棘手。
• 被认为不受欢迎. 和Node-Sass

我在这里博客，你可以在这里读到更多关于它的内容。

Answer 2

24/01/2021

由于它是用正式的节点-sass github doc编写的，所以node是不推荐的。

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

所以，我想，如果你想要长期的计划，或者是跟上时代的发展，最好选择飞镖。

Answer 3

节点-sass可能比dart-sass更快，但是在编写这个省道-sass时，它是实现@use规则的惟一库，这是在@import上强烈推荐的。根据官方的sass-lang网站

@import怎么了？@import规则存在一些严重问题：

• @import使所有变量、混合器和函数都可以全局访问。这使得人们(或工具)很难知道什么是定义的。
• 因为一切都是全局的，库必须在所有成员的前面加上前缀，以避免命名冲突。
• @extend规则也是全局的，这使得很难预测哪种样式规则将被扩展。
• 每个样式表都会被执行，它的CSS每次被@import编辑时都会发出，这会增加编译时间并产生臃肿的输出。
• 无法定义下游样式表无法访问的私有成员或占位符选择器。

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

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

为了跟上Sass中的最佳实践，您现在应该使用dart(即沙斯)。