diff --git a/frontend/src/layout/components/Sidebar/components/SubItem.vue b/frontend/src/layout/components/Sidebar/components/SubItem.vue
index 2c8d27eb4..9b7b4a0db 100644
--- a/frontend/src/layout/components/Sidebar/components/SubItem.vue
+++ b/frontend/src/layout/components/Sidebar/components/SubItem.vue
@@ -39,5 +39,5 @@ defineProps<{ menuList: RouteRecordRaw[] }>();
 </script>
 
 <style scoped lang="scss">
-@import '../index.scss';
+@use '../index';
 </style>
diff --git a/frontend/src/layout/components/Sidebar/index.scss b/frontend/src/layout/components/Sidebar/index.scss
index e09e3af33..289f0d0da 100644
--- a/frontend/src/layout/components/Sidebar/index.scss
+++ b/frontend/src/layout/components/Sidebar/index.scss
@@ -13,16 +13,16 @@
 
         &:hover {
             .el-icon {
-                color: $primary-color;
+                color: var(--el-color-primary);
             }
 
             span {
-                color: $primary-color;
+                color: var(--el-color-primary);
             }
         }
         &.is-active {
             background-color: var(--el-menu-item-bg-color-active);
-            border: 2px solid $primary-color;
+            border: 2px solid var(--el-color-primary);
 
             &::before {
                 position: absolute;
@@ -31,7 +31,7 @@
                 width: 4px;
                 height: 14px;
                 content: '';
-                background: $primary-color;
+                background: var(--el-color-primary);
             }
         }
     }
@@ -39,26 +39,26 @@
         &.is-active {
             .el-sub-menu__title {
                 span {
-                    color: $primary-color;
+                    color: var(--el-color-primary);
                 }
 
                 .el-icon {
-                    color: $primary-color;
+                    color: var(--el-color-primary);
                 }
             }
         }
         .el-sub-menu__title {
             background-color: var(--el-menu-item-bg-color);
-            box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
+            box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
             height: 46px;
             border-radius: 4px;
             &:hover {
                 .el-icon {
-                    color: $primary-color;
+                    color: var(--el-color-primary);
                 }
 
                 span {
-                    color: $primary-color;
+                    color: var(--el-color-primary);
                 }
             }
         }
diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
index 62cef3da0..ec6233be8 100644
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, defineEmits } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { RouteRecordRaw, useRoute } from 'vue-router';
 import { loadingSvg } from '@/utils/svg';
 import Logo from './components/Logo.vue';
@@ -192,7 +192,14 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-@import './index.scss';
+@use 'index';
+
+.custom-menu .el-menu-item {
+    white-space: normal !important;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    line-height: normal;
+}
 
 .custom-menu .el-menu-item {
     white-space: normal !important;
diff --git a/frontend/src/views/app-store/installed/index.vue b/frontend/src/views/app-store/installed/index.vue
index 0eb936d26..f2afa3d6a 100644
--- a/frontend/src/views/app-store/installed/index.vue
+++ b/frontend/src/views/app-store/installed/index.vue
@@ -630,7 +630,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-@import '../index.scss';
+@use '../index';
 @media only screen and (max-width: 1400px) {
     .install-card-col-12 {
         max-width: 100%;
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 5bca44379..11c0c1923 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -32,6 +32,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
             preprocessorOptions: {
                 scss: {
                     additionalData: `@use "@/styles/var.scss" as *;`,
+                    api: 'modern',
                 },
             },
         },
@@ -84,6 +85,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         ],
         esbuild: {
             pure: viteEnv.VITE_DROP_CONSOLE ? ['console.log'] : [],
+            drop: viteEnv.VITE_DROP_CONSOLE ? ['debugger'] : [],
         },
         build: {
             outDir: '../cmd/server/web',