分离 Less 全局变量、全局样式

src/assets/css/global.less

@@ -1,15 +1,5 @@
 /* -- 全局样式 -- */
 
-// 变量
-
-@headerHeight: 4rem;
-
-@colorPrimary: #2196F3;
-@colorSecondary: #67C23A;
-@colorWhite: #F9F9F9;
-
-@transitionTime: .25s;
-
 // 滚动条
 
 ::-webkit-scrollbar {
@@ -106,4 +96,4 @@ body {
 
 .el-select-dropdown {
     border: none !important;
-}
+}

src/assets/css/variable.less

@@ -0,0 +1,9 @@
+/* -- 全局变量 -- */
+
+@headerHeight: 4rem;
+
+@colorPrimary: #2196F3;
+@colorSecondary: #67C23A;
+@colorWhite: #F9F9F9;
+
+@transitionTime: .25s;

src/main.js

@@ -9,6 +9,7 @@ import utils from './assets/js/utils';
 
 import 'ress/ress.css';
 import './assets/css/element.scss';
+import './assets/css/global.less';
 
 Vue.use(ElementUI);
 

vue.config.js

@@ -24,9 +24,9 @@ module.exports = {
     pluginOptions: {
         'style-resources-loader': {
             preProcessor: 'less',
-            // 全局 Less
+            // 全局 Less 变量
             patterns: [
-                path.resolve(__dirname, 'src/assets/css/global.less')
+                path.resolve(__dirname, 'src/assets/css/variable.less')
             ]
         }
     },