问题
When creating a new project with CLI (v3.7.0), there is an option to choose between dart-sass or node-sass compiler.
How do these compare to each other, to be more specific than declared in 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 fibersPlease 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 fibersto 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
EDIT 2020/01: Vue CLI 4.2.2 create new project is still suggesting dart-sass as the first option before node-sass. Yet it has been established here that node-sass is the more performant choice, and almost nobody uses dart-sass (ccleve's comment).
回答1:
According to the official 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 is fast if you run it, inside Dart-VM but it says it compiles to pure JS. The npmjs package of dart-sass is just a compiled version which is slower than node-sass or native dart-sass.
If you are looking for the measurements I recommend to read about it here, there are samples and different numbers:
Running on a file containing 16 instances of importing the Bootstrap framework:
sassc: 0.820s
Dart Sass from a script snapshot: 1.558s
Dart Sass native executable: 0.927s
Dart Sass on Node.js: 3.129s Based on these numbers, Dart Sass from a native executable is approximately:
1.1x slower than libsass
3.4x faster than Dart Sass on Node
This is the first measurement with Dart Sass running as ahead-of-time-compiled native code, and the results are encouraging. It's well below the 100ms threshold for tiny files, and it's on par with SassC for most test cases. SassC still leads for tests with many extends, although only slightly, and for one of our real-world test cases (although Dart Sass leads in others). The two implementations can be fairly described as having about the same performance overall.
Dart Sass on Node is still substantially slower than on the Dart VM, and that relative slowdown becomes more pronounced as the raw Dart code becomes faster.
My personal experience of using dart-sass npmjs package instead of node-sass(which is js wrapper of native C library) is that dart-sass is much (for me at least 50x because I have lots of big theme files) slower than the node-sass.
回答2:
node-sass doesn't work with node v.12
来源：https://stackoverflow.com/questions/56150402/vue-cli-css-pre-processor-option-dart-sass-vs-node-sass