vue3.0 使用scss全局变量

vue3中使用scss全局变量
网上教程都过时了，这个是最新的最好用的玩法

1、安装库：sass-resources-loader
安装命令 install sass-resources-loader --save-dev

​ or yarn add sass-resources-loader --dev

2、vue.config.js 配置

/**
 * 注意Dependencies需要引入
 * "sass": "^1.32.7",
 *"sass-loader": "^12.0.0",
 *"sass-resources-loader": "^2.2.5"
 * 全局变量的Sass引方法，值得收藏
 * @param config  chainWebpack(config) 中来的一个配置
 */
const globalSass = config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach((item) => {
        item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
                resources: './src/styles/common.scss'  //相对路径
            })
            .end()
    })
}

3、已经可以在任何组件中，使用全局变量了

<style lang="scss" scoped>
.cmp-login {
  border: 1px solid $red;   //这个$red是 全局引入的scss中定义的 
}
</style>

版权声明：本文为CSDN博主「jpruby」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_58039950/article/details/124446146