diff --git a/src/App.vue b/src/App.vue
index 041b3b5a6ffd014d5d67b318386f82c5c7b01dcb..3f554c2cc6dd0c00a7331b44660c6ba6f1c30b54 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -207,12 +207,14 @@ function handleAction(actionType: ActionType) {
 </script>
 
 <style lang="scss" scoped>
+@use 'src/styles/var';
+
 .main {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  color: $color-text;
-  background-color: $color-page-bg;
+  color: var.$color-text;
+  background-color: var.$color-page-bg;
 
   .content-warpper {
     height: 100%;
@@ -242,7 +244,7 @@ function handleAction(actionType: ActionType) {
     align-items: center;
     justify-content: center;
 
-    @media screen and (max-width: $screen-sm) {
+    @media screen and (max-width: var.$screen-sm) {
       transform: scale(0.85);
     }
   }
@@ -259,21 +261,21 @@ function handleAction(actionType: ActionType) {
       height: 2.5rem;
       margin: 0 1rem;
       padding: 0 1rem;
-      color: $color-text;
+      color: var.$color-text;
       font-weight: bold;
-      background: $color-gray;
+      background: var.$color-gray;
       border-radius: 0.6rem;
       cursor: pointer;
       transition: color 0.2s;
       user-select: none;
 
       &:hover {
-        color: lighten($color-text, 10);
+        color: lighten(var.$color-text, 10);
       }
 
       &:disabled,
       &[disabled] {
-        color: rgba($color-text, 0.5);
+        color: rgba(var.$color-text, 0.5);
         cursor: default;
       }
     }
@@ -307,14 +309,14 @@ function handleAction(actionType: ActionType) {
     }
 
     .gradient-top {
-      @include gradient-style($color-secondary);
+      @include gradient-style(var.$color-secondary);
 
       top: -50%;
       right: -20%;
     }
 
     .gradient-bottom {
-      @include gradient-style($color-accent);
+      @include gradient-style(var.$color-accent);
 
       bottom: -50%;
       left: -20%;
diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
index a7a5993b0a190eff6579fbc3ba83da6fff35e04c..964910e5a98664dd05f3dfdb0009b5edadce2e80 100644
--- a/src/components/ActionBar.vue
+++ b/src/components/ActionBar.vue
@@ -62,12 +62,14 @@ const actions = computed(() => [
 </script>
 
 <style lang="scss" scoped>
+@use 'src/styles/var';
+
 .action-menu {
   display: flex;
   align-items: center;
   margin-top: 5rem;
   padding: 0.5rem;
-  background-color: $color-gray;
+  background-color: var.$color-gray;
   border-radius: 2rem;
 
   .menu-item {
@@ -77,7 +79,7 @@ const actions = computed(() => [
     width: 2.5rem;
     height: 2.5rem;
     margin: 0 0.5rem;
-    background-color: lighten($color-gray, 10);
+    background-color: lighten(var.$color-gray, 10);
     border-radius: 50%;
     cursor: pointer;
     transition: opacity 0.2s;
diff --git a/src/components/CodeModal.vue b/src/components/CodeModal.vue
index 4c68770692539cd60b6aa1c74175ccad9d4f938f..930fa0bea7236a83ae67a68624b1921d9baa003c 100644
--- a/src/components/CodeModal.vue
+++ b/src/components/CodeModal.vue
@@ -86,6 +86,8 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@use 'src/styles/var';
+
 .code-modal {
   position: fixed;
   bottom: 0;
@@ -110,7 +112,7 @@ onUnmounted(() => {
   margin: 0 auto;
   padding: $code-header-height $code-box-side-padding-normal 2.5rem
     $code-box-side-padding-normal;
-  background-color: lighten($color-dark, 3);
+  background-color: lighten(var.$color-dark, 3);
   border-radius: 1rem;
   transition: width 0.2s;
 
@@ -118,11 +120,11 @@ onUnmounted(() => {
     width: 75%;
   }
 
-  @media screen and (max-width: $screen-md) {
+  @media screen and (max-width: var.$screen-md) {
     width: 80%;
   }
 
-  @media screen and (max-width: $screen-sm) {
+  @media screen and (max-width: var.$screen-sm) {
     width: 90%;
     padding: $code-header-height $code-box-side-padding-small 2.5rem
       $code-box-side-padding-small;
@@ -153,7 +155,7 @@ onUnmounted(() => {
       width: 2rem;
       height: 2rem;
       margin-left: auto;
-      background-color: lighten($color-dark, 8);
+      background-color: lighten(var.$color-dark, 8);
       border-radius: 50%;
       cursor: pointer;
 
@@ -176,7 +178,7 @@ onUnmounted(() => {
     height: 20rem;
     height: 100%;
     padding: 1rem 0;
-    background: darken($color-dark, 1);
+    background: darken(var.$color-dark, 1);
     border-radius: 0.8rem;
 
     .code-scroll-wrapper {
@@ -193,15 +195,15 @@ onUnmounted(() => {
       width: 5rem;
       height: 2rem;
       color: #fff;
-      background-color: $color-accent;
+      background-color: var.$color-accent;
       border-radius: 0.4rem;
       transform: translate(-50%, -45%);
       cursor: pointer;
       transition: color 0.15s, background-color 0.15s;
 
       &.copied {
-        color: $color-dark;
-        background-color: $color-secondary;
+        color: var.$color-dark;
+        background-color: var.$color-secondary;
       }
     }
   }
@@ -220,6 +222,8 @@ onUnmounted(() => {
 </style>
 
 <style lang="scss">
+@use 'src/styles/var';
+
 .code-content {
   display: block;
   padding: 0 1.5rem;
@@ -229,7 +233,7 @@ onUnmounted(() => {
   font-family: 'Ubuntu Mono', Fallback;
   line-height: 1.4;
 
-  @media screen and (max-width: $screen-sm) {
+  @media screen and (max-width: var.$screen-sm) {
     padding: 0 1rem;
     font-size: 1rem;
   }
diff --git a/src/components/Configurator.vue b/src/components/Configurator.vue
index 3e9d809afc4bfc71527a992a20aef8e9ee4faacf..35ffc31370515a5f64fe92f0095d28a2d83edf73 100644
--- a/src/components/Configurator.vue
+++ b/src/components/Configurator.vue
@@ -165,15 +165,17 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
 </script>
 
 <style lang="scss" scoped>
+@use 'src/styles/var';
+
 .configurator-scroll {
-  width: $layout-sider-width;
+  width: var.$layout-sider-width;
   height: 100%;
-  background-color: $color-configurator;
+  background-color: var.$color-configurator;
 }
 
 .configurator {
   width: 100%;
-  color: $color-text;
+  color: var.$color-text;
 
   .wrapper-shape {
     display: flex;
@@ -187,7 +189,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
         display: inline-block;
         width: 1.5rem;
         height: 1.5rem;
-        background-color: $color-text;
+        background-color: var.$color-text;
         transition: background-color 0.2s;
 
         &.circle {
@@ -199,7 +201,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
         }
 
         &.active {
-          background-color: $color-accent;
+          background-color: var.$color-accent;
         }
       }
     }
@@ -226,7 +228,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
         margin: 0 auto;
         font-size: 16px;
         border-radius: 50%;
-        box-shadow: 0 0 0.05em 0.2em $color-configurator;
+        box-shadow: 0 0 0.05em 0.2em var.$color-configurator;
 
         &.transparent {
           background: #fff !important;
@@ -265,7 +267,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
           top: 50%;
           left: 50%;
           z-index: 1;
-          color: $color-configurator;
+          color: var.$color-configurator;
           font-size: 1.5rem;
           transform: translate(-50%, -50%) scale(0.5);
           opacity: 0;
@@ -301,11 +303,11 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
       transition: background-color 0.2s;
 
       &.selected.selected {
-        background-color: lighten($color-configurator, 6);
+        background-color: lighten(var.$color-configurator, 6);
       }
 
       &:hover {
-        background-color: darken($color-configurator, 3);
+        background-color: darken(var.$color-configurator, 3);
       }
 
       & > :deep(svg) {
@@ -314,7 +316,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
       }
 
       & :deep(path) {
-        stroke: $color-stroke !important;
+        stroke: var.$color-stroke !important;
       }
     }
   }
diff --git a/src/components/DownloadModal.vue b/src/components/DownloadModal.vue
index 2524cc32903ce92d199605dd2b7054cca7047623..3a9589e2afeba8d7e0976dfc552bc781939e0406 100644
--- a/src/components/DownloadModal.vue
+++ b/src/components/DownloadModal.vue
@@ -37,6 +37,8 @@ const { t } = useI18n()
 </script>
 
 <style lang="scss" scoped>
+@use 'src/styles/var';
+
 .download-modal-wrapper {
   position: fixed;
   bottom: 0;
@@ -53,7 +55,7 @@ const { t } = useI18n()
   backdrop-filter: blur(0.3rem);
 
   @supports not (backdrop-filter: blur(0.3rem)) {
-    background-color: rgba($color-dark, 0.8);
+    background-color: rgba(var.$color-dark, 0.8);
   }
 }
 
@@ -62,8 +64,8 @@ const { t } = useI18n()
   width: 50%;
   min-width: 310px;
   max-width: 500px;
-  background-color: darken($color-dark, 1);
-  border: 0.15rem solid rgba($color-accent, 0.8);
+  background-color: darken(var.$color-dark, 1);
+  border: 0.15rem solid rgba(var.$color-accent, 0.8);
   border-radius: 1rem;
 
   .modal-body {
@@ -78,11 +80,11 @@ const { t } = useI18n()
       width: 60%;
       margin: 0 auto;
 
-      @media screen and (max-width: $screen-md) {
+      @media screen and (max-width: var.$screen-md) {
         width: 80%;
       }
 
-      @media screen and (max-width: $screen-sm) {
+      @media screen and (max-width: var.$screen-sm) {
         width: 90%;
       }
 
@@ -97,7 +99,7 @@ const { t } = useI18n()
       max-width: 70%;
       margin: 0 auto;
       padding: 1.5rem 0;
-      color: $color-text;
+      color: var.$color-text;
       font-size: 0.85rem;
       text-align: center;
       cursor: default;
@@ -113,9 +115,9 @@ const { t } = useI18n()
     margin: 0 1rem;
     margin-left: auto;
     padding: 0 1rem;
-    color: $color-text;
+    color: var.$color-text;
     font-weight: bold;
-    background: $color-gray;
+    background: var.$color-gray;
     border-radius: 0.2rem;
     border-radius: 0.6rem;
     cursor: pointer;
@@ -123,7 +125,7 @@ const { t } = useI18n()
     user-select: none;
 
     &:hover {
-      color: lighten($color-text, 10);
+      color: lighten(var.$color-text, 10);
       transform: translateY(-0.3rem);
     }
   }
diff --git a/src/layouts/Container.vue b/src/layouts/Container.vue
index 96711d1443112830316d9591d215548f25e4e471..0362b2d7d99009270bf99870f2a89839ff6e0e41 100644
--- a/src/layouts/Container.vue
+++ b/src/layouts/Container.vue
@@ -53,16 +53,18 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@use 'src/styles/var';
+
 .container {
   height: 100%;
-  padding-right: $layout-sider-width;
+  padding-right: var.$layout-sider-width;
   transition: padding-right 0.2s;
 
   &.full {
     padding-right: 0;
   }
 
-  @media screen and (max-width: $screen-lg) {
+  @media screen and (max-width: var.$screen-lg) {
     padding-right: 0;
   }
 }
diff --git a/src/layouts/Footer.vue b/src/layouts/Footer.vue
index 9fa580e367cdf530da091956b6668790ce5dc280..04f5250ca8a25926c9cfce1f1974be6699ac708a 100644
--- a/src/layouts/Footer.vue
+++ b/src/layouts/Footer.vue
@@ -33,13 +33,15 @@ function switchLocale() {
 </script>
 
 <style lang="scss" scoped>
+@use 'src/styles/var';
+
 .footer {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: $layout-footer-height;
+  height: var.$layout-footer-height;
   padding: 0.8rem 0;
-  color: rgba($color-text, 0.4);
+  color: rgba(var.$color-text, 0.4);
   font-weight: bold;
   font-size: 0.8rem;
 
@@ -56,7 +58,7 @@ function switchLocale() {
     transition: color 0.2s;
 
     &:hover {
-      color: $color-text;
+      color: var.$color-text;
     }
   }
 }
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
index 6696be0cf56a53c3d8cd23ac36056577810a1158..537f6507a1ae3cc0463e0d9be0a8d8fe49886405 100644
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@@ -33,10 +33,12 @@ import { recordEvent } from '@/utils/ga'
 </script>
 
 <style lang="scss" scoped>
+@use 'src/styles/var';
+
 .header {
   display: flex;
   align-items: center;
-  height: $layout-header-height;
+  height: var.$layout-header-height;
   padding: 1rem 2rem;
 
   .site-title {
@@ -45,7 +47,7 @@ import { recordEvent } from '@/utils/ga'
     font-size: 1.9rem;
     cursor: default;
 
-    @media screen and (max-width: $screen-sm) {
+    @media screen and (max-width: var.$screen-sm) {
       display: none;
     }
   }
@@ -59,18 +61,18 @@ import { recordEvent } from '@/utils/ga'
       justify-content: center;
       width: 8rem;
       height: 2.5rem;
-      color: $color-text;
+      color: var.$color-text;
       font-weight: bold;
       font-size: 1.05rem;
-      background-color: $color-dark;
+      background-color: var.$color-dark;
       border-radius: 0.6rem;
       cursor: pointer;
       transition: box-shadow 0.2s, background-color 0.2s;
       user-select: none;
 
       &:hover {
-        background-color: lighten($color-dark, 2);
-        box-shadow: 0 0.2rem 1.5rem 0.2rem lighten($color-dark, 5);
+        background-color: lighten(var.$color-dark, 2);
+        box-shadow: 0 0.2rem 1.5rem 0.2rem lighten(var.$color-dark, 5);
       }
 
       .text {
diff --git a/src/layouts/Sider.vue b/src/layouts/Sider.vue
index b401d9b32a183d96ea6d9881b460b03a9a487edf..9d59815f633549ad8c895993d2c10f1bd5adb9b0 100644
--- a/src/layouts/Sider.vue
+++ b/src/layouts/Sider.vue
@@ -16,6 +16,8 @@ const { isCollapsed, openSider, closeSider } = useSider()
 </script>
 
 <style lang="scss" scoped>
+@use 'src/styles/var';
+
 .sider {
   position: fixed;
   top: 0;
@@ -45,7 +47,7 @@ const { isCollapsed, openSider, closeSider } = useSider()
     justify-content: center;
     width: 1.2rem;
     height: 4rem;
-    background-color: lighten($color-configurator, 2);
+    background-color: lighten(var.$color-configurator, 2);
     border-radius: 0.4rem 0 0 0.4rem;
     transform: translate(-100%, -50%);
     cursor: pointer;
@@ -53,7 +55,7 @@ const { isCollapsed, openSider, closeSider } = useSider()
 
     &:hover {
       width: 1.5rem;
-      background-color: lighten($color-configurator, 5);
+      background-color: lighten(var.$color-configurator, 5);
     }
   }
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 6f68113a322b4b29ac4a5fd377e04352a9d15432..1a4889aff31b8671ebbb324a4457570e0ebe862c 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,4 +1,7 @@
+@use 'src/styles/var';
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
 @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
 
 @font-face {
@@ -25,7 +28,7 @@ img {
 }
 
 ::selection {
-  background: rgba($color-text, 0.15);
+  background: rgba(var.$color-text, 0.15);
 }
 
 #app {
diff --git a/src/styles/variables.scss b/src/styles/var.scss
similarity index 100%
rename from src/styles/variables.scss
rename to src/styles/var.scss
diff --git a/vite.config.ts b/vite.config.ts
index b6a642403d77673f95ccd283f520ab23bc04a627..5f1e49afbeb24562e173d9a2f2792889d2a41b23 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -34,12 +34,4 @@ export default defineConfig(({ mode }) => ({
     __VUE_I18N_LEGACY_API__: false,
     __INTLIFY_PROD_DEVTOOLS__: false,
   },
-
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@import "./src/styles/variables.scss";`,
-      },
-    },
-  },
 }))