vue3中使用scss全局变量

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

2、vue.config.js 配置

module.exports = {
  chainWebpack(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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容