sass 全局变量配置

//版本
    "node-sass": "^4.0.1",
    "sass-loader":  "7.1.0",
    "sass-resources-loader": "^2.2.5",

vue.config.js

module.exports = defineConfig({

 publicPath:'./',
 productionSourceMap: false,
//一定要注意上方sass版本
 css:{
   loaderOptions: {
     sass: {
       data: `@import "@/assets/style/variable.scss";`
     }
   },
 },
}

在css 文件内设置对应的类型

//variable.scss
$menuActiveText:var(--mainColor);;

全局改变sass颜色

document.getElementsByTagName('body')[0].style.setProperty('--mainColor', 'blue');

如果需要页面中使用sass全局变量因为 版本差异将sass文件从新定义

将 variable.scss 改为 variable.module.scss image.png

// scss 文件中定义并抛出
$bgColor:var(--bgColor,#0072ff);//默认背景颜色
//
:export {
  homeSkinId: $bgColor;
}

//页面中接收

import variable from "./variable.module.scss";
console.log(variable.homeSkinId)
computed: {
  
    variable() {
      return variable
    },
  
  }
<div>{{variable.homeSkinId}}</div>