vue =＞ Node Sass to Dart Sass不兼容deep

不兼容

• 替换 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/的警告。