vue-cli3/4全局引入scss变量和使用

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变量了

愤怒的牛牛的简书

愤怒的牛牛的新浪博客

愤怒的牛牛的GitHub