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

Question

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 eac

Answer 1

node-sass may be faster than dart-sass, but as of writing this dart-sass is the only library which implements the @use rule, which is strongly recommended over @import. According to the official 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.

Additionally, @import will be gradually phased out over the next few years, and eventually removed from the language entirely.

In order to stay up-to-date with the best practices in Sass, you should use dart-sass (i.e. sass) for now.