less文件

package.json

@@ -18,6 +18,7 @@
     "naf-core": "^0.1.2",
     "vue": "^2.6.11",
     "vue-meta": "^2.3.4",
+    "vue-route": "^1.5.1",
     "vue-router": "^3.3.2",
     "vuex": "^3.1.3",
     "wangeditor": "^3.1.1"
@@ -36,6 +37,7 @@
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "prettier": "^1.19.1",
+    "style-resources-loader": "^1.3.3",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/App.vue

@@ -19,6 +19,7 @@ export default {
 </script>
 
 <style lang="less">
+@import url('~@/style/color.less');
 html {
   overflow-x: visible;
   overflow-y: auto;
@@ -31,6 +32,7 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: @textcolor;
 }
 p {
   padding: 0;

src/style/color.less

@@ -0,0 +1,2 @@
+@bgcolor:1f;
+@textcolor:#fff;

vue.config.js

@@ -38,4 +38,18 @@ module.exports = {
       },
     },
   },
+  chainWebpack: config => {
+    const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
+    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)));
+  },
 };
+function addStyleResource(rule) {
+  rule
+    .use('style-resource')
+    .loader('style-resources-loader')
+    .options({
+      patterns: [
+        path.resolve(__dirname, './src/style/color.less'), // 需要全局导入的less
+      ],
+    });
+}