Node Sass to Dart Sass

    所以为了解决这个问题,本项目在 修改为dart-sass进行构建,它能在保证性能的前提下大大简化用户的安装成本。通过这个 issueNode Sass to Dart Sass - 图1下面相关的评论就可以知道,安装 node-sass 是多么麻烦的一件事。

    这里选择使用dart-sass还有一个更主要的原因,sass官方已经将dart-sass作为未来主要的的开发方向了,有任何新功能它都是会优先支持的,而且它已经在社区里稳定运行了很长的一段时间,基本没有什么坑了。dart-sass之所以容易安装,主要是因为它会被编译成纯 js,这样就可以直接在的 node 环境中使用。虽然这样它的运行速度会比基于 的慢一些些,但这些速度的差异几乎可以忽略不计。整个社区现在都在拥抱dart-sass,我们没有理由拒绝!而且它的确大大简化了用户的安装成本。

    目前vue-cli在选择预处理的时候也会默认优先使用dart-scss,相关 prNode Sass to Dart Sass - 图2

    具体 dart-sass性能评测可见:

    升级也非常的简单,只需要两个步骤

    具体可见该: Pull RequestNode Sass to Dart Sass - 图3

    不兼容

    具体 demo:

    1. .a {
    2. /deep/ {
    3. .b {
    4. }
    5. }
    6. }
    7. /* 修改为 */
    8. ::v-deep {
    9. .b {
    10. color: red;
    11. }
    12. }

    不管你是否使用dart-sass,我都是建议你使用::v-deep的写法,它不仅兼容了 css 的>>>写法,还兼容了 sass /deep/的写法。而且它还是 中指定的写法。

    而且原本 /deep/ 的写法也本身就被 Chrome 所废弃,你现在经常能在控制台中发现 Chrome 提示你不要使用的警告。