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

Vue CLI CSS pre-processor option: dart-sass VS node-sass?

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

这些如何相互比较,比 Vue docs 中声明的更具体?

A Tip on Sass Performance

Note that when using Dart Sass, synchronous compilation is twice as fast as asynchronous compilation by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the fibers package to call asynchronous importers from the synchronous code path. To enable this, simply install fibers as a project dependency:

npm install -D fibers

Please also be aware, as it's a native module, there may be compatibility issues vary on the OS and build environment. In that case, please run npm uninstall -D fibers to fix the problem.

? 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 是性能更高的选择,而 almost nobody uses dart-sass (ccleve 的评论)。

编辑 2020/09: 由于 Ali Bahrami 更新了他的广泛回答,dart-sass 是首选 作为 node-sass 被标记为已弃用

太糟糕了dart-sass它是一个JS编译版本,性能很差。但是,它的开发人员很清楚这一点,并且正在努力提高 this issue.

中所述的性能

更新 2020 年 9 月 17 日

由于每天都有 up-votes 这个答案,我认为也许值得更深入地研究这个主题。


考虑sass-lang website

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It's fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.

Dart-Sass速度快,但不是JS编译版。实际上,当我们说 Dart-Sass 时,有两个选项:

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

我用 Node-Sass、Dart-Sass 和 Dart-Sass(JS) 编译了 Bootstrap 4 Sass 文件到 CSS,你可以看到结果如下:

  • 在这种特殊情况下,两秒钟没什么大不了的;但考虑 Dart-Sass(JS) 比 Dart-Sass(Dart VM) 慢九倍,比 node-sass.
  • 慢三倍
  • 我有一个项目有 +20 个主题,node-sass 花了 30 秒, 但是我尝试使用Dart-Sass(JS),结果用了一个世纪!
  • 虽然 Dart-Sass(Dart VM) 是最快的但是安装或集成它有点棘手。
  • 和Node-Sassis considered deprecated.

blogged在这里,你可以在这里阅读更多。

node-sass 可能比 dart-sass 快,但在撰写本文时,dart-sass 是唯一实现 @use 规则的库,强烈推荐超过 @import。根据官方sass-lang website:

What’s Wrong With @import? The @import rule has a number of serious issues:

  • @import makes all variables, mixins, and functions globally accessible. This makes it very difficult for people (or tools) to tell where anything is defined.

  • Because everything’s global, libraries must prefix to all their members to avoid naming collisions.

  • @extend rules are also global, which makes it difficult to predict which style rules will be extended.

  • Each stylesheet is executed and its CSS emitted every time it’s @imported, which increases compilation time and produces bloated output.

  • There was no way to define private members or placeholder selectors that were inaccessible to downstream stylesheets.

The new module system and the @use rule address all these problems.

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

为了保持 up-to-date 在 Sass 中的最佳实践,您现在应该使用 dart-sass(即 sass)。

24/01/2021

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

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

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