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

Question 1

当创建与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

编辑2020/01： Vue CLI 4.2.2创建新项目仍然建议dart-sass作为之前的第一个选项node-sass。然而，这里已经确定这node-sass是性能更高的选择，几乎没有人使用dart-sass（ccleve的评论）。

编辑2020/09：阿里巴赫拉米更新了广泛的答案，dart-sass是首选的node-sass被标记为已过时。

太糟糕了dart-sass，因为它是JS编译版本，性能不佳。但是，它的开发人员对此很清楚，并且正在努力提高本期中所述的性能。

Question 2

更新09/17/2020：

随着这个答案每天都在投票，我认为也许值得更深入地探讨这个话题。

考虑到sass-lang网站：

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

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

Dart-VM上的Dart-Sass
NPM上的Dart-Sass是纯JS编译版本

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

在这种情况下，两秒钟不是什么大问题；但请考虑Dart-Sass（JS）比Dart-Sass（Dart VM）慢9倍，比node-sass慢3倍。
我有一个带有+20个主题的项目，使用node-sass花费了30秒，但是我尝试使用Dart-Sass（JS），花了一个世纪！
尽管Dart-Sass（Dart VM）是最快的，但是安装或集成它却有些棘手。
而Node-Sass被认为已弃用。

我在这里写过博客，您可以在这里阅读更多信息。

Question 3

node-sass可能比dart-sass快，但是截至撰写本文时，dart-sass是唯一实现@use规则的库，强烈建议在之上使用@import。根据官方的sass-lang网站：

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

@import使所有变量，mixin和函数都可以全局访问。这使人员（或工具）很难说出定义了什么。

因为所有内容都是全局的，所以库必须在其所有成员之前加上前缀，以避免命名冲突。

@extend 规则也是全局的，因此很难预测将扩展哪些样式规则。

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

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

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

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

为了跟上Sass的最佳实践，您现在应该使用dart-sass（即sass）。