1 assets建一个放置变量的scss文件(variable.scss)
$menuText:#001528;
$menuActiveText:#009A61;
$menuBg:#eee;
//暴露css
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
menuBg: $menuBg;
}
2引入变量(根据自己的文件夹路径而定)
import variables from '@/assets/styles/variables.scss'
3在computed中缓存暴露变量
computed:{
variables() {
return variables
}
}
4可以在template中使用变量啦
<el-menu
router
:background-color="variables.menuBg"
:text-color="variables.menuText"
:active-text-color="variables.menuActiveText"
mode="horizontal"
>
</el-menu>