SCSS全局安装+更改el-dialog背景及文字颜色

参考网页——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

\src\assets\scss\base.scss，新建该文件，用于存放所有的公共变量。

\build\utils.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背景及文字颜色

 高级前端工程师如何避免写出屎一样的代码（二）？ - 掘金 (juejin.cn)

可以参考掘金这篇文章，写的很好很详细。