Improve(scss): reduce hot-reload time by importing element ui theme-chalk scss file in main.ts

Author: Armour

src/main.ts

@@ -3,6 +3,8 @@ import Vue, { DirectiveOptions } from 'vue'
 import 'normalize.css'
 import ElementUI from 'element-ui'
 import SvgIcon from 'vue-svgicon'
+
+import '@/styles/element-variables.scss'
 import '@/styles/index.scss'
 
 import App from '@/App.vue'

src/styles/_mixins.scss

@@ -1,3 +1,4 @@
+/* Mixins */
 @mixin clearfix {
   &:after {
     content: "";

src/styles/_svgicon.scss

@@ -1,4 +1,4 @@
-/* recommended css code for vue-svgicon */
+/* Recommended css code for vue-svgicon */
 .svg-icon {
     display: inline-block;
     width: 16px;
@@ -15,7 +15,6 @@
 }
 
 .svg-up {
-    /* default */
     transform: rotate(0deg);
 }
 

src/styles/_transition.scss

@@ -1,7 +1,7 @@
-/* global transition css for vue.js */
-/* see https://vuejs.org/v2/guide/transitions.html for detail */
+/* Global transition */
+// See https://vuejs.org/v2/guide/transitions.html for detail
 
-/* fade */
+// fade
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.28s;
@@ -12,7 +12,7 @@
   opacity: 0;
 }
 
-/* fade-transform */
+// fade-transform
 .fade-transform-leave-active,
 .fade-transform-enter-active {
   transition: all .5s;
@@ -28,7 +28,7 @@
   transform: translateX(30px);
 }
 
-/* fade */
+// breadcrumb
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
   transition: all .5s;

src/styles/_variables.scss

@@ -1,4 +1,6 @@
-/* base color */
+/* Variables */
+
+// Base color
 $blue:#324157;
 $light-blue:#3A71A8;
 $red:#C03639;
@@ -8,7 +10,7 @@ $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
 
-/* Sidebar */
+// Sidebar
 $sideBarWidth: 210px;
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
@@ -17,7 +19,7 @@ $menuBg:#304156;
 $menuText:#bfcbd9;
 $menuActiveText:#409EFF; // Also see settings.sidebarTextTheme
 
-/* Login page */
+// Login page
 $lightGray: #eee;
 $darkGray:#889aa4;
 $loginBg: #2d3a4b;

src/styles/element-variables.scss

@@ -1,4 +1,6 @@
-/* Override Element UI variables */
+/* Element Variables */
+
+// Override Element UI variables
 $--color-primary: #1890ff;
 $--color-success: #13ce66;
 $--color-warning: #FFBA00;
@@ -10,7 +12,7 @@ $--border-color-light: #dfe4ed;
 $--border-color-lighter: #e6ebf5;
 $--table-border:1px solid#dfe6ec;
 
-/* icon font path, required */
+// Icon font path, required
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 // Apply overrided variables in Element UI

src/styles/index.scss

@@ -1,9 +1,10 @@
-@import './element-variables.scss';
-@import './variables.scss';
-@import './mixins.scss';
+// @import './variables.scss'; // Already imported in style-resources-loader
+// @import './mixins.scss'; // Already imported in style-resources-loader
 @import './transition.scss';
 @import './svgicon.scss';
 
+/* Global scss */
+
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;