vue在template中如何使用自定义变量

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>