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)

可以參考掘金這篇文章，寫的很好很詳細。