perf[Sidebar]: use sass variables in vue template

Author: PanJiaChen

src/styles/variables.scss

@@ -12,4 +12,16 @@ $panGreen: #30B08F;
 $menuBg:#304156;
 $subMenuBg:#1f2d3d;
 $menuHover:#001528;
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
 $sideBarWidth: 180px;
+
+// the :export directive is the magic sauce for webpack
+:export {
+  menuBg: $menuBg;
+  subMenuBg: $subMenuBg;
+  menuHover: $menuHover;
+  menuText:$menuText;
+  menuActiveText:$menuActiveText;
+  sideBarWidth: $sideBarWidth;
+}

src/views/layout/components/Sidebar/index.vue

@@ -4,10 +4,10 @@
       :show-timeout="200"
       :default-active="$route.path"
       :collapse="isCollapse"
+      :background-color="variables.menuBg"
+      :text-color="variables.menuText"
+      :active-text-color="variables.menuActiveText"
       mode="vertical"
-      background-color="#304156"
-      text-color="#bfcbd9"
-      active-text-color="#409EFF"
     >
       <sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path"/>
     </el-menu>
@@ -17,6 +17,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
 
 export default {
   components: { SidebarItem },
@@ -25,6 +26,9 @@ export default {
       'permission_routers',
       'sidebar'
     ]),
+    variables() {
+      return variables
+    },
     isCollapse() {
       return !this.sidebar.opened
     }