We often use CSS preprocessors when doing front-end projects. For example, we can choose which preprocessor to use (Sass/Less/Stylus) when building projects with Vue-CLI. Currently, Vue-CLI also uses DART-SCSS by default when selecting Sass preprocessorDue to node-Sass underlying dependencieslibsass Causing many users to install particularly difficult, especially Windows users, it forces users inwindowsMust be installed in the environmentpython2andVisual StudioTo compile successfully. This is a real sweat, one that comes up repeatedly during development:

The more important reason for using DarT-Sass is that sass officially has darT-Sass as a major development direction for the future, and it’s a priority to support any new features, and it’s been in the community for a long time. The main reason dart-Sass is easy to install is that it is compiled as pure JS, so it can be used directly in the Node environment. Although it will run a little slower than the Libsass-based version, the difference in speed is negligible.

The official website of Sass-lang is sass-lang.com/dart-sass. Currently, vue-CLI also uses DART-SCSS and related PR by default when selecting sass preprocessing

The same

Both are tools for compiling sass into CSS.

The difference between

  • Nod-sass compiles sass using node(calling libsass written in CPP).
  • Dart-sass is compiled using the DRat VM.
  • Node-sass is automatically compiled in real time, while DART-Sass needs to be saved before it takes effect
  • Dart-sass is recommended for better performance (which is also used by sASS), and Nod-Sass often fails to be installed due to national conditions

How to upgrade

npm uninstall node-sass
npm install sass --save-dev
Copy the code

Are not compatible

Note that nod-sass no longer supports /deep/ as sass does. It needs to be written as ::v-deep. Related: issue

.a { /deep/ { .b { color: red; A {::v-deep {.b {color: red; }}}Copy the code

Reference: panjiachen. Making. IO/vue – element…