参考网页——vue 项目中使用scss,并设置scss全局变量 - 简书 (jianshu.com)、
Node Sass version 6.0.0 is incompatible with^4.0.0_码龄1年零3个月的博客-CSDN博客
1.装SCSS
cnpm install sass-loader --save
npm install node-sass@4.14.1
// 之前因为Node-sass版本高还卸载重装过,就直接装低版本的
根目录下找到 build 文件下的 webpack/base/conf.js,找到 rules数组添加如下对象:
rules: [
{
test: /.scss$/,
loaders: ['style', 'css', 'sass']
},
做到这一步,就可以愉快地使用局部SCSS样式了。
如果遇到this.getResolve问题,参考第个一网页,在package.json里手动降级sass-loader到7.3.1
npm i重新安装一遍依赖再启动即可
2. 配置全局SCSS
cnpm install sass-resources-loader --save
srcassetsscssase.scss,新建该文件,用于存放所有的公共变量。
uildutils.js里面,将scss所在区域改成如下
scss: generateLoaders('sass').concat({ loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/scss/base.scss') } }),
接着重新npm run dev运行一遍,就可以使用base.scss里面的SCSS全局变量了。
3.使用
举例——更改el-dialog背景及文字颜色
可以参考掘金这篇文章,写的很好很详细。