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 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
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).
EDIT 2020/09: As Ali Bahrami updated his extensive answer, dart-sass
is the preferred choice as node-sass
is being marked as deprecated.
Too bad dart-sass
in it's a JS-compiled version has poor performance. However, it's developers are well aware of this, and are working towards greater performance as stated in this issue.
As this answer gets up-votes every day, I thought maybe it is worth diving deeper into this topic.
Considering 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, but not the JS compiled version. Practically when we say Dart-Sass there are two options:
I compiled Bootstrap 4 Sass file to CSS with Node-Sass, Dart-Sass and Dart-Sass(JS) and you can see the following result:
I blogged about it here, you can read more about it here.