1、为了后续进行页面样式的统一管理，我们在项目中设置了全局css，新建文件src/styles/global.scss，src/styles/global.module.scss文件，global.scss内容

//global.scss内容
// 全局变量
:root{
  --menu-background: #0f1325; // 菜单背景色
  --menu-text: #bfcbd9; // 菜单文字颜色
  --menu-active-text: var(--el-menu-active-color); // 菜单激活文字颜色
  --menu-hover: #263445; // 菜单悬停背景色
}
$menu-background: var(--menu-background); // 菜单背景色
$menu-text: var(--menu-text); // 菜单文字颜色
$menu-active-text: var(--menu-active-text); // 菜单激活文字颜色
$menu-hover: var(--menu-hover); // 菜单悬停背景色

2、在global.module.scss文件中暴露

//global.module.scss文件
:export {
  menu-background: $menu-background;
  menu-text: $menu-text;
  menu-active-text: $menu-active-text;
  menu-hover: $menu-hover;
} 

3、在需要用到样式的时候去引入，为了直观表现，可以直接在控制台打印出来

<script setup lang="ts" name="navSide">
import variables from "@/styles/global.module.scss";
console.log('lll',variables)

</script>

4、如果提醒说 找不到模块“@/styles/global.module.scss”或其相应的类型声明，在src平级目录新建typings.d.ts文件

内容如下

declare module '*.module.scss' {
  const classes: { [key: string]: string };
  export default classes;
}

5、在tsconfig.json中的include中添加该文件

"include": ["/**/*.ts", "./typings.d.ts"],

4、在界面中使用，我这边用在侧边菜单上面

 <el-menu
    background-color="variables['menu-background']"
    text-color="variables['menu-text']"
    active-text-color="variables['menu-active-text']"
    class="el-menu-vertical-demo"
    default-active="2"
    @open="handleOpen"
    @close="handleClose"
      >
       <el-menu-item index="1">
          <el-icon><icon-menu /></el-icon>
          <span>收集箱</span>
        </el-menu-item>
        <el-menu-item index="2" disabled>
          <el-icon><document /></el-icon>
          <span>等待处理</span>
        </el-menu-item>
</el-menu>

5、最终效果如图