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 preprocessor
Due to node-Sass underlying dependencieslibsass Causing many users to install particularly difficult, especially Windows users, it forces users in
windows
Must be installed in the environmentpython2
andVisual Studio
To 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…