refactor: all less files @import use /src/... path

babel.config.js

@@ -6,7 +6,14 @@ module.exports = function (api) {
     presets: [['next/babel']],
     plugins: [
       ['import', { libraryName: 'antd', style: true }],
-      ['module-resolver', { alias: { '@': './src' } }],
+      [
+        'module-resolver',
+        {
+          alias: {
+            '@': './src',
+          },
+        },
+      ],
     ],
   };
 };

src/components/FooterNav/style.module.less

@@ -1,4 +1,4 @@
-@import '../../styles/variables.less';
+@import '/src/styles/variables.less';
 
 .comp-wrapper {
   display: flex;

src/components/HeaderNavbar/style.module.less

@@ -1,4 +1,4 @@
-@import '../../styles/variables.less';
+@import '/src/styles/variables.less';
 
 .comp-wrapper {
   display: flex;

src/components/HugeIcon/style.module.less

@@ -1,4 +1,4 @@
-@import '../../styles/variables.less';
+@import '/src/styles/variables.less';
 
 .comp-wrapper {
   transition: all 0.3s;

src/components/LazyLoadingSpin/style.module.less

@@ -1,4 +1,4 @@
-@import '../../styles/variables.less';
+@import '/src/styles/variables.less';
 
 .comp-wrapper {
   position: fixed;

src/layouts/MasterLayout/styles.module.less

@@ -1,4 +1,4 @@
-@import '../../styles/variables.less';
+@import '/src/styles/variables.less';
 
 .layout-wrapper {
   height: 100%;

src/page-components/about/About/styles.module.less

@@ -1,9 +1,15 @@
+@import '/src/styles/variables.less';
+@import '/src/styles/mixin.less';
+
 .comp-wrapper {
   position: relative;
   height: 100%;
   display: flex;
   justify-content: center;
   place-items: center;
+  //
+  // just test less file aliase
+  //.just-a-bgc();
 }
 
 // DARK-MODE

src/styles/_sync-vars-to-root.js

@@ -1,7 +1,8 @@
 const fs = require('fs');
 // const mkdirp = require('mkdirp');
 
-const vars = fs.readFileSync('./variables.less', 'utf-8');
+// Avoid too long formatting
+const vars = fs.readFileSync('./variables.less', 'utf-8').replace(/,\n/g, ',');
 
 const matchs = vars.match(/^@.*/gm);
 
@@ -12,7 +13,7 @@ const allVars = matchs.map((m) => {
   if (mv && mv[1]) return mv[1];
 });
 
-const HEADER = `@import './variables.less';
+const HEADER = `@import '/src/styles/variables.less';
 
 :root {
 `;

src/styles/global.less

@@ -1,5 +1,5 @@
-@import './variables.less';
-@import './variables-css.less';
+@import '/src/styles/variables.less';
+@import '/src/styles/variables-css.less';
 
 html,
 body {

src/styles/mixin.less

@@ -0,0 +1,3 @@
+.just-a-bgc() {
+  background-color: yellow;
+}

src/styles/variables-css.less

@@ -1,7 +1,8 @@
-@import './variables.less';
+@import '/src/styles/variables.less';
 
 :root {
   --THEME--DARK: @THEME--DARK;
+  --font-family: @font-family;
   --primary-color: @primary-color;
   --primary-color--dark: @primary-color--dark;
   --primary-color-bg: @primary-color-bg;

tsconfig.json

@@ -4,7 +4,11 @@
     "target": "es6",
     "module": "esnext",
     "moduleResolution": "node",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,7 +23,9 @@
     "emitDecoratorMetadata": true,
     "jsx": "preserve",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
   "include": [
@@ -30,5 +36,7 @@
     "**/*.ts",
     "**/*.tsx"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }