1、安装sass-resources-loader
//安装最新版本
npm i sass-resources-loader --save-dev
//安装指定版本
npm i sass-resources-loader@2.1.1 --save-dev
在package.json的devDependencies中看到 sass-resources-loader即安装成功
ps：官方最新版本是2.2.3，他是支持到webpack4的，由于我项目中是webpack和其他的依赖的版本不是最新的，基于版本兼容处理，指定安装了2.1.1版本
官方文档：https://www.npmjs.com/package/sass-resources-loader
2、新建xxx.scss文件.书写全局配置的变量
// 适配比例
$scale-vw:750/2/100vw;
3、配置vue.config.js ,注意resources的文件路径
module.exports = {
chainWebpack: (chain) => {
const oneofsMap = chain.module.rule('scss').oneOfs.store
oneofsMap.forEach(item=>{
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
resources: './src/assets/css/xxx.scss',
})
})
}
}
4、如果 main.js 中以前有导入需要删除
查看main.js是否还有导入
import './assets/css/normal.scss';
配置完成,接下来就可以全局使用$scale-vw变量了
