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

Question

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

这些如何相互比较，比 Vue 文档 中声明的更具体？

关于 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 create new project 仍然建议 dart-sass 作为 node-sass 之前的第一个选项。然而，这里已经确定 node-sass 是性能更高的选择， 几乎没有人使用 dart-sass （ccleve 的评论）。

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

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

原文由 ux.engineer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2020 年 9 月 17 日 更新：

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

---

考虑 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 被认为是 deprecated 。

我在这里写了 博客，你可以在这里阅读更多关于它的信息。

原文由 Ali Bahrami 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

24/01/2021

由于它是在官方 node-sass github doc 中编写的，因此 node-sass 已 弃用。

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

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

原文由 Earth_Believer 发布，翻译遵循 CC BY-SA 4.0 许可协议