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

Question

使用 CLI (v3.7.0) 创建新项目时，可以选择dart-sass 或node-sass 编译器。

它们如何相互比较，比Vue docs 中声明的更具体？

关于 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

EDIT 2020/01： Vue CLI 4.2.2 create new project 仍然建议 dart-sass 作为 node-sass 之前的第一个选项。然而，这里已经确定node-sass 是性能更高的选择，而almost nobody uses dart-sass（ccleve 的评论）。

EDIT 2020/09：随着 Ali Bahrami 更新他的广泛答案，dart-sass 是首选，因为 node-sass 被标记为已弃用。

太糟糕了dart-sass，它是一个 JS 编译的版本，性能很差。但是，它的开发人员很清楚这一点，并正在努力实现更高的性能，如this issue 所述。

Answer 1

24/01/2021

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

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

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

Answer 2

更新 2020 年 9 月 17 日：

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

---

考虑sass-lang website：

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 is considered deprecated。

我在这里blogged 了解它，您可以在此处阅读更多信息。

Answer 3

node-sass 可能比 dart-sass 快，但在编写此 dart-sass 时，它是唯一实现 @use 规则的库，强烈推荐使用 @import。据官方sass-lang website：

@import 有什么问题？ @import 规则有许多严重的问题：

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

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

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

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

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

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

此外，@import 将在未来几年内更名为 gradually phased out，并最终从语言中完全删除。

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