还是从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"
}