css中有些样式变量定义抽取
// variables.scss文件
$menuText:#fff;
$menuActiveText:#FFFFFF;
$subMenuActiveText:#fff; //https://github.com/ElemeFE/element/issues/12951
$menuBg: #3B69Ec;
$menuHover:linear-gradient(to right, #325ECE, #325ECE);
$subMenuBg:#3B69Ec;
$subMenuHover:linear-gradient(to right, #325ECE, #325ECE);
$sideBarWidth: 230px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}
就这么用
// vue文件
<el-menu
:background-color="variables.menuBg"
:text-color="variables.menuText"
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
mode="vertical"
></el-menu>
<script>
import variables from '@/styles/variables.scss'
export default {
computed: {
variables() {
return variables
}
}
</script>