前端| Vue-cli3 中如何将 node-sass 替换为 dart-sass | Vue_百度...

发布网友发布时间：2024-10-16 00:19

共1个回答

热心网友时间：2024-10-26 21:30

选择dart-sass作为开发方向的原因在于，sass官方已经将其视为未来发展的重点，所有新功能都将优先支持dart-sass。此外，dart-sass已在社区中稳定运行了很长时间，基本不存在问题。它之所以易于安装，是因为它会被编译成纯js，可以直接在node环境中使用。尽管与基于libsass的版本相比，其运行速度稍慢，但这种速度差异微乎其微。目前整个社区都在接受dart-sass，我们也没有理由拒绝它。事实上，dart-sass大大简化了用户的安装成本。

目前vue-cli在默认选择sass预处理器时，也会优先使用dart-scss。

更多相关信息可以参考这篇文章：Announcing Dart Sass

关于dart-sass的性能评测，可以查看：Perf Report

替换过程非常简单，只需几个步骤即可完成。

如果使用了stylelint，可能需要修改校验规则。

替换node-sass后需要注意的一点是，它不再支持之前sass的/deep/写法，需要统一改为::v-deep的写法。相关issue可以查看。

具体示例：

无论是否使用dart-sass，都建议使用::v-deep的写法，它不仅兼容了css的>>>写法，还兼容了sass /deep/的写法。同时，它还是vue 3.0 RFC中指定的写法。

此外，原本/deep/的写法也已被Chrome废弃，现在你可能会在控制台中发现Chrome提示不要使用/deep/的警告。

补充：在阅读完vue 3.0 RFC后，发现更推荐以下写法

另外还有两种scope css写法：在