vue-cli 3中dart-sass替换node-sass

百度搜索了一圈竟然没找到有用的!

为什么要替换?

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'],
	      },
	    ],
	  },
	  ...
	};

Tips

如果控制台报下面的错误, 可能是 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)