# Node Sass to Dart Sass
Before v4.3.0
, this project was built based on node-sass
, but node-sass
low-level dependencies libsass, resulting in many users installing Especially difficult for Windows users, it forces users to install python2
and Visual Studio
in the windows
environment to compile successfully.
So in order to solve this problem, this project was modified to build dart-sass
in v4.3.0, it can guarantee performance Under the premise of greatly simplifying the user's installation costs. Through this issue the relevant comments below can be known, install` Node-sass is such a troublesome thing.
There is a more important reason for choosing to use dart-sass here. Officially, sass
has taken dart-sass as the main development direction in the future. Any new features will be supported first, and it It has been running steadily in the community for a long time, and there are basically no pits. The main reason why dart-sass is easy to install is because it will be compiled into pure js, so that it can be used directly in the node environment. Although its running speed will be slower than that based on libsass, the difference in these speeds is almost negligible. The entire community is now embracing dart-sass
, and we have no reason to refuse! And it does greatly simplify the user's installation costs.
Currently, vue-cli
will also prefer to use dart-scss
by default when selecting sass
preprocessing, related: pr
Related instructions can be found in this article: Announcing Dart Sass
Specific dart-sass
performance evaluation can be seen: Perf Report
# Upgrade plan
The upgrade is also very simple, requiring only two steps
npm uninstall node-sass
npm install sass -S -D
The upgrade can also be seen in detail: Pull Request is simple and only requires two steps
# Not compatible
One thing to note after replacing node-sass
is that it no longer supports the /deep/
writing style of sass
before, and it needs to be changed to the writing style of ::v-deep
. Related: issue
Concrete demo:
.a {
/deep/ {
.b {
color: red;
}
}
}
/* change into */
.a {
::v-deep {
.b {
color: red;
}
}
}
Regardless of whether you use dart-sass
or not, I suggest you use ::v-deep
notation, which is not only compatible with the css >>>
notation, but also compatible with sass /deep/
. And it's the way of writing specified in vue 3.0 RFC.
And the original writing of /deep/
itself was abandoned by Chrome. You can often find a warning in the console that Chrome reminds you not to use /deep/
.
More: scope css writing