支持模板 less 语法

index.html

@@ -8,15 +8,16 @@
     <!-- 加载框架样式 -->
     <link rel="stylesheet" href="static/plugs/core/vue.element.plus.css">
 
+    <!-- 这页面配色还可以
+     https://microsoftedgewelcome.microsoft.com/zh-cn/update/96?channel=stable&version=96.0.1054.29&form=MT002S
+     -->
 
     <!-- 加载基础框架组件 -->
     <script src="static/plugs/core/vue.min.js"></script>
     <script src="static/plugs/core/vue.router.js"></script>
     <script src="static/plugs/core/vue.sfc.loader.js"></script>
     <script src="static/plugs/core/vue.element.plus.js"></script>
-    <script src="static/plugs/less/less.min.js" async></script>
+    <script src="static/plugs/less/less.min.js"></script>
-    
-    <link rel="stylesheet/less" href="static/app.less">
 
     <!-- 加载基础框架模块 -->
     <script type="module" src="static/app.js"></script>

static/app.js

@@ -1,16 +1,18 @@
 ;(async () => {
     const options = {
-        moduleCache: {vue: Vue},
+        moduleCache: {
+            vue: Vue,
+            less: less
+        },
         getFile(url) {
             return fetch(url).then(res => {
                 if (!res.ok) throw Object.assign(new Error(url + ' ' + res.statusText), {res});
                 return res.text();
-            })
+            });
         },
         addStyle(textContent) {
-            document.head.insertBefore(
+            const object = Object.assign(document.createElement('style'), {textContent});
-                Object.assign(document.createElement('style'), {textContent}),
+            document.head.insertBefore(object, document.head.getElementsByTagName('style')[0] || null);
-                document.head.getElementsByTagName('style')[0] || null);
         },
     };
 

static/template/layout.vue

@@ -13,6 +13,45 @@
   </el-container>
 </template>
 
+<style lang="less">
+html, body, #app {
+  height: 100%;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+#app > .el-container {
+  height: 100%;
+
+  > .el-header {
+    color: #fff;
+    background: #0d84ff;
+    line-height: 60px;
+  }
+
+  > .el-container {
+
+    > .el-aside {
+      background: #53a8ff;
+    }
+
+    > .el-container {
+
+      > .el-main {
+        background: gray;
+      }
+
+      > .el-footer {
+        color: #fff;
+        background: #333;
+        line-height: 60px;
+      }
+
+    }
+  }
+}
+</style>
 
 <script>
 export default {