vue3中使用scss全局变量

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

or yarn add sass-resources-loader --dev

2、vue.config.js 配置

 const {defineConfig} = require('@vue/cli-service')
 module.exports = defineConfig({
     transpileDependencies: true,
     // 默认启动端口设置
     devServer: {
         port: 80 //devServer//设置本地默认端口
     },
     //全局 sass的配置
     chainWebpack(config) {
         globalSass(config)
     }
 })
 ​
 ​
 /**
  * 注意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>

\