vue-cli 3 dart-sass替换node-sass为何要替换 1:node-sass仓库在墙外, 且新特性都会

为何要替换?

1:node-sass仓库在墙外, 且新特性都会先在dart-sass实现

2:它不仅兼容了 css 的`>>>`写法，还兼容了 sass `/deep/`的写法，而且原本 `/deep/` 的写法也本身就被 Chrome 所废弃，你现在经常能在控制台中发现 Chrome 提示你不要使用`/deep/`的警告。

如何替换:

1: 卸载node-sass

  // 第一种方式:  
  在package.json中的node-sass删除掉  卸载完以后建议重新下包 安装依赖
  
  // 第二种方式:
  npm uninstall node-sass
  yarn remove node-sass

2: 安装 dart-sass

  // npm
  npm install --dev sass 
  
  // yarn
  yarn add sass --dev

3: 配置 vue.config.js 文件

// 一般默认文件里是没有这个css配置的, 添加进去就好.
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'), // This line must in sass option
      },
    },
  }
 }

4: 全局搜索 (/deep/ 和 >>>) 替换为::v-deep

注意:

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

如果控制台报下面的错误, 可能是 `sass-loader` 版过旧, 建议将版本更新到 `7.1.0 +`

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
   at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
   at Function.Module._load (internal/modules/cjs/loader.js:507:25)
   at Module.require (internal/modules/cjs/loader.js:637:17)
   at require (internal/modules/cjs/helpers.js:22:18)
   at Object.sassLoader (/path-of-your-project-directory/node_modules/sass-loader/lib/loader.js:24:22

项目中使用了stylelint , 可能需要修改下校验规则，在stylelint.config.js 代码如下

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