scss定义变量导出获取不到？？

还是从0开始搭个后台模版框架，然后我用的是scss定义了几个全局css颜色变量，方便之后做统一修改，结果循环菜单列表时发现怎么竟然用变量修改无效，一直显示白色（结果可直接跳到最后查看）
导出代码：

$menuBg:#304156;
$menuHover:#263445;

$subMenuBg:#1f2d3d;
$subMenuHover:#001528;

$sideBarWidth: 210px;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

得到结果el-menu背景色一直是官方默认的白色

然后检查了导入代码以及使用变量的代码，如下：

import variables from '@/styles/variables.module.scss'
computed: {
    variables() {
      return variables
    }
  },

      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>

在mounted里面输出了下variables，发现压根没拿到😅

下载各依赖版本如下：

"dependencies": {
    "axios": "^0.26.1",
    "core-js": "^3.8.3",
    "echarts": "^5.3.1",
    "element-ui": "^2.15.6",
    "fuse.js": "^6.5.3",
    "js-cookie": "^3.0.1",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
    "path-browserify": "^1.0.1",
    "path-to-regexp": "^6.2.0",
    "screenfull": "^6.0.1",
    "vue": "^2.6.14",
    "vue-count-to": "^1.0.13",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "svg-sprite-loader": "^6.0.11",
    "svgo": "^2.8.0",
    "svgo-loader": "^3.0.0",
    "url-loader": "^4.1.1",
    "vue-template-compiler": "^2.6.14"
  }