diff --git a/babel.config.js b/babel.config.js
index f902adf..3590a6e 100644
--- a/babel.config.js
+++ b/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',
+          },
+        },
+      ],
     ],
   };
 };
diff --git a/src/components/FooterNav/style.module.less b/src/components/FooterNav/style.module.less
index 0f18e57..5218fa9 100644
--- a/src/components/FooterNav/style.module.less
+++ b/src/components/FooterNav/style.module.less
@@ -1,4 +1,4 @@
-@import '../../styles/variables.less';
+@import '/src/styles/variables.less';
 
 .comp-wrapper {
   display: flex;
diff --git a/src/components/HeaderNavbar/style.module.less b/src/components/HeaderNavbar/style.module.less
index eb2fc69..4ba14d3 100644
--- a/src/components/HeaderNavbar/style.module.less
+++ b/src/components/HeaderNavbar/style.module.less
@@ -1,4 +1,4 @@
-@import '../../styles/variables.less';
+@import '/src/styles/variables.less';
 
 .comp-wrapper {
   display: flex;
diff --git a/src/components/HugeIcon/style.module.less b/src/components/HugeIcon/style.module.less
index 9b84db0..c050c25 100644
--- a/src/components/HugeIcon/style.module.less
+++ b/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;
diff --git a/src/components/LazyLoadingSpin/style.module.less b/src/components/LazyLoadingSpin/style.module.less
index ec807a8..cd15542 100644
--- a/src/components/LazyLoadingSpin/style.module.less
+++ b/src/components/LazyLoadingSpin/style.module.less
@@ -1,4 +1,4 @@
-@import '../../styles/variables.less';
+@import '/src/styles/variables.less';
 
 .comp-wrapper {
   position: fixed;
diff --git a/src/layouts/MasterLayout/styles.module.less b/src/layouts/MasterLayout/styles.module.less
index 20312fb..9eb8701 100644
--- a/src/layouts/MasterLayout/styles.module.less
+++ b/src/layouts/MasterLayout/styles.module.less
@@ -1,4 +1,4 @@
-@import '../../styles/variables.less';
+@import '/src/styles/variables.less';
 
 .layout-wrapper {
   height: 100%;
diff --git a/src/page-components/about/About/styles.module.less b/src/page-components/about/About/styles.module.less
index 8be5737..7b4f41d 100644
--- a/src/page-components/about/About/styles.module.less
+++ b/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
diff --git a/src/styles/_sync-vars-to-root.js b/src/styles/_sync-vars-to-root.js
index fab2450..3cae75f 100644
--- a/src/styles/_sync-vars-to-root.js
+++ b/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 {
 `;
diff --git a/src/styles/global.less b/src/styles/global.less
index 397c75c..2bb0672 100644
--- a/src/styles/global.less
+++ b/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 {
diff --git a/src/styles/mixin.less b/src/styles/mixin.less
index e69de29..5bb0da8 100644
--- a/src/styles/mixin.less
+++ b/src/styles/mixin.less
@@ -0,0 +1,3 @@
+.just-a-bgc() {
+  background-color: yellow;
+}
diff --git a/src/styles/variables-css.less b/src/styles/variables-css.less
index 061a443..4d3b0f1 100644
--- a/src/styles/variables-css.less
+++ b/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;
diff --git a/tsconfig.json b/tsconfig.json
index 6b97af5..a740fa9 100644
--- a/tsconfig.json
+++ b/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"
+  ]
 }