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、新建variables.scss文件，文件位置和文件名称根据项目实际确定，我放在了自己建的styles文件下

3、在variables.scss写常用变量，如：

//color
$theme-red-color: #ff1534;
$primary-white-color: #fff;
$primary-black-color: #000;

//font-size
$fs-24: 24rpx;
$fs-26: 26rpx;
$fs-28: 28rpx;
$fs-30: 30rpx;
$fs-32: 32rpx;
$fs-34: 34rpx;
$fs-36: 36rpx;
$fs-44: 44rpx;
$fs-48: 48rpx;

4、配置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/styles/variables.scss', 
            })
        })
    } 
} 

vue-cli3配置文档：https://cli.vuejs.org/config/#vue-config-js

5、在页面中使用

说明：不要在 variables.scss写任何可以直接编译成css的代码，因为全局引入scss是会把 variables.scss中的代码在每个scss文件中添加一遍，如果含有能直接编译成css的代码，存在影响页面样式的风险

ps：以上内容为学习成长过程的简单记录，如有不恰当之处，欢迎沟通交流！

最后

以上就是犹豫冥王星最近收集整理的关于vue-cli3/4全局引入scss变量和使用的全部内容，更多相关vue-cli3/4全局引入scss变量和使用内容请搜索靠谱客的其他文章。