v4.3.0 Change Node Sass to Dart Sass
⚠️ Breaking Changes
chore: change node-sass to dart-sass(#3040 by @Cat7373 )
/deep/ 已不适用，需要使用 ::v-deep进行替换
在 v4.3.0之前本项目都是基于node-sass进行构建的，但node-sass底层依赖 libsass，导致很多用户安装的特别的困难，尤其是 windows 用户，它强制用户在windows环境中必须安装python2和Visual Studio才能编译成功。
所以为了解决这个问题，本项目在 v4.3.0修改为dart-sass进行构建，它能在保证性能的前提下大大简化用户的安装成本。通过这个 issue下面相关的评论就可以知道，安装 node-sass 是多么麻烦的一件事。
这里选择使用dart-sass还有一个更主要的原因，sass官方已经将dart-sass作为未来主要的的开发方向了，有任何新功能它都是会优先支持的，而且它已经在社区里稳定运行了很长的一段时间，基本没有什么坑了。dart-sass之所以容易安装，主要是因为它会被编译成纯 js，这样就可以直接在的 node 环境中使用。虽然这样它的运行速度会比基于 libsass的慢一些些，但这些速度的差异几乎可以忽略不计。整个社区现在都在拥抱dart-sass，我们没有理由拒绝！而且它的确大大简化了用户的安装成本。
目前vue-cli在选择sass预处理的时候也会默认优先使用dart-scss，相关 pr
相关的说明可以见该篇文章： Announcing Dart Sass
具体 dart-sass性能评测可见：Perf Report
升级方案
升级也非常的简单，只需要两个步骤
npm uninstall node-sass
npm install sass -S -D具体可见该： Pull Request
不兼容
替换 node-sass 之后有一个地方需要注意，就是它不再支持之前 sass 的那种 /deep/ 写法，需要统一改为 ::v-deep 的写法。相关： issue
具体 demo：
.a {
/deep/ {
.b {
color: red;
}
}
}
/* 修改为 */
.a {
::v-deep {
.b {
color: red;
}
}
}不管你是否使用dart-sass，我都是建议你使用::v-deep的写法，它不仅兼容了 css 的>>>写法，还兼容了 sass /deep/的写法。而且它还是 vue 3.0 RFC 中指定的写法。
而且原本 /deep/ 的写法也本身就被 Chrome 所废弃，你现在经常能在控制台中发现 Chrome 提示你不要使用/deep/的警告。
更多： scope css 写法
⚠️ Breaking Changes
chore: change node-sass to dart-sass(#3040 by @Cat7373 )
/deep/ is no longer applicable, it needs to be replaced with ::v-deep
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 -DThe 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