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

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

如何比较这些相互之间，更具体地比在 Vue docs中声明？

顶嘴表演小贴士

注意，当使用 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 CLI 4.2.2 create new project 仍然建议 dart-sass作为 node-sass之前的第一个选项。然而，这里已经确定，node-sass是表现更好的选择，而 几乎没有人使用 Dart-sass(ccleve 的评论)。

编辑2020/09: 阿里 · 巴赫拉米更新了他的详细答案，dart-sass是首选为 node-sass被标记为已弃用。

糟糕的是 dart-sass在 JS 编译的版本中性能很差。然而，它的开发人员非常清楚这一点，并正在努力提高性能，如 这个问题所述。

70684 次浏览
小开
最佳答案

更新 2020年9月17日:

由于这个答案每天都得到投票支持，我想也许值得更深入地探讨这个话题。

考虑到 Sass-Lang 网站:

Dart Sass 是 Sass 的主要实现，也就是说 新的特性之前，任何其他实现。它的快速，容易 安装，并且它编译 纯 JavaScript，这使得它很容易 整合到现代网页开发工作流程中。

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

  • Dart-Sass 在 Dart-VM 上
  • Dart-Sass 对 NPM这是纯 JS 编译版本

我编译了 Bootstrap 4 Sass 文件到 CSS 中的 Node-Sass，Dart-Sass 和 Dart-Sass (JS) ，你可以看到以下结果:

Node-Sass and Dart-Sass comparison - source: https://itnext.io/the-css-preprocessor-dilemma-node-sass-or-dart-sass-32a0a096572?source=friends_link&sk=3c465b78a0e1bc98379afd818546fcf4

  • 在这种特殊情况下，两秒钟没什么大不了的; 但是考虑到 Dart-Sass (JS)比 Dart-Sass (Dart VM)慢9倍，比 node-Sass 慢3倍。
  • 我有一个 + 20主题的项目，它花了30秒的节点, 但我尝试使用 Dart-Sass (JS) ，它花了一个世纪！
  • 虽然 Dart-Sass (Dart VM)是最快的，但是安装或集成它有点棘手。
  • 还有 Node-Sass 被认为是废弃的。

我在这里了解它，你可以在这里了解更多。

小开

Node-sass 可能比 dart-sass 更快，但是在编写本文时，dart-sass 是唯一实现 @use规则的库，这是强烈推荐的 @import规则。根据官方 Sass-Lang 网站的说法:

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

  • @import使所有变量、 Mixin 和函数都可以全局访问。这使得人们(或工具)很难知道在哪里定义了任何东西。

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

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

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

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

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

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

为了与 Sass 的最佳实践保持同步，你现在应该使用 dart-Sass (即 无礼)。

小开

2021年1月24日

就像官方写的那样 Node-sass github doc ，node-sass 是 不赞成。

警告 : LibSass 和 Node Sass是 不赞成。虽然他们将继续收到维护版本无限期，没有计划添加额外的功能或兼容任何新的 CSS 或 Sass 功能。仍然使用它的项目应该转移到 达特 · 萨斯。

所以我想，如果你计划长期发展或者保持最新状态的话，最好还是选择飞镖。


提交答案