1.安装sass-resources-loader
执行以下命令:
npm install sass-resources-loader --save-dev
2.在build文件夹的utils.js
文件代码中scss: generateLoaders('sass')
后面添加如下代码:
scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/styles/index.scss') //全局变量文件的相对路径 } } ),
3.重启服务
npm run dev
这时就可以使用全局scss变量了
举例:按钮背景颜色使用全局颜色变量
全局变量文件的写法:
$mainColor:#f386a7;
全局变量的使用方法:
.el-button { background-color: $mainColor; }