Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代！使用dart-sass代替node-sass，不管你是否使用dart-sass，建议你使用::v-deep的写法，它不仅兼容了 css 的>>>写法，还兼容了 sass /deep/的写法
而且它还是 vue 3.0 中指定的写法。而且原本 /deep/ 的写法也本身就被 Chrome 所废弃

使用方法

为什么要替换?
node-sass仓库在墙外, 且新特性都会先在dart-sass实现

怎么替换?
1.卸载 node-sass

// npm
 npm uninstall node-sass
 
// yarn
 yarn remove node-sass

2.安装 dart-sass

// npm 
 npm install --dev sass

// yarn
 yarn add sass --dev

4.更新 vue.config.js 文件

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'), // This line must in sass option
      },
    },
  }
}

一般默认文件里是没有这个css配置的, 添加进去就好.

5.全局搜索 /deep/ , 将项目里的 /deep/ 替换为 ::v-deep
6.如果你用了 stylelint , 那可能需要修改下校验规则

    // stylelint.config.js
    module.exports = {
      ...
      rules: {
        'selector-pseudo-element-no-unknown': [
          true,
          {
            ignorePseudoElements: ['v-deep'],
          },
        ],
      },
      ...
    };

如果vue3.0之前vue2.0你使用了/deep/ 没有替换 将会报错