vue3.0 使用scss全局变量

最新推荐文章于 2025-05-30 11:14:12 发布

whatever`

最新推荐文章于 2025-05-30 11:14:12 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： scss vue.js 前端

原文链接：https://blog.csdn.net/m0_58039950/article/details/124446146

这篇博客介绍了在 Vue3 项目中如何设置和使用 SCSS 全局变量的最新步骤。首先，需要安装 `sass-resources-loader` 库，然后在 `vue.config.js` 中进行配置，指定全局变量文件的位置。配置完成后，即可在组件样式中直接引用这些全局 SCSS 变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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