From a79f0bd0d3580490a0b7f0ff669c55c5b3db11ca Mon Sep 17 00:00:00 2001
From: limengnan <420004014@qq.com>
Date: Mon, 10 Nov 2025 10:59:46 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9sass=E8=BF=90?=
 =?UTF-8?q?=E8=A1=8C=E8=AD=A6=E5=91=8A=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layout/components/Sidebar/MixNav.vue  |  4 ++-
 .../src/layout/components/Sidebar/index.vue   |  4 +++
 framework/frontend/src/layout/index.vue       |  6 ++--
 framework/frontend/src/styles/index.scss      |  8 ++---
 framework/frontend/src/styles/sidebar.scss    | 32 ++++++++++---------
 framework/frontend/vite.config.ts             | 10 +++++-
 6 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/framework/frontend/src/layout/components/Sidebar/MixNav.vue b/framework/frontend/src/layout/components/Sidebar/MixNav.vue
index 55b8a7f..31adfbe 100644
--- a/framework/frontend/src/layout/components/Sidebar/MixNav.vue
+++ b/framework/frontend/src/layout/components/Sidebar/MixNav.vue
@@ -126,6 +126,8 @@ function logout() {
 </template>
 
 <style lang="scss" scoped>
+@use '@/styles/variables.module' as variables;
+
 .horizontal-header {
   display: flex;
   display: -webkit-flex;
@@ -154,4 +156,4 @@ function logout() {
     color: #fff;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/framework/frontend/src/layout/components/Sidebar/index.vue b/framework/frontend/src/layout/components/Sidebar/index.vue
index 8fdf4f4..f150716 100644
--- a/framework/frontend/src/layout/components/Sidebar/index.vue
+++ b/framework/frontend/src/layout/components/Sidebar/index.vue
@@ -41,3 +41,7 @@ const activeMenu = computed<string>(() => {
     </el-scrollbar>
   </div>
 </template>
+
+<style lang="scss" scoped>
+@use '@/styles/variables.module' as variables;
+</style>
\ No newline at end of file
diff --git a/framework/frontend/src/layout/index.vue b/framework/frontend/src/layout/index.vue
index af0c28d..8383406 100644
--- a/framework/frontend/src/layout/index.vue
+++ b/framework/frontend/src/layout/index.vue
@@ -91,8 +91,8 @@ function toggleSideBar() {
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/mixin.scss';
-@import '@/styles/variables.module.scss';
+@use '@/styles/mixin.scss' as mixin;
+@use '@/styles/variables.module.scss' as variables;
 
 .app-wrapper {
   @include clearfix;
@@ -131,4 +131,4 @@ function toggleSideBar() {
 .mobile .fixed-header {
   width: 100%;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/framework/frontend/src/styles/index.scss b/framework/frontend/src/styles/index.scss
index e0fa2bc..e6e58e4 100644
--- a/framework/frontend/src/styles/index.scss
+++ b/framework/frontend/src/styles/index.scss
@@ -1,7 +1,7 @@
-@import 'src/styles/variables.module';
-@import 'src/styles/element-plus';
-@import './sidebar.scss';
-@import './tailwind.scss';
+@use 'src/styles/variables.module' as variables;
+@use 'src/styles/element-plus' as element-plus;
+@use './sidebar' as sidebar;
+@use './tailwind' as tailwind;
 
 html,body,#app{
   height: 100%;
diff --git a/framework/frontend/src/styles/sidebar.scss b/framework/frontend/src/styles/sidebar.scss
index d0c50ae..a0e5c74 100644
--- a/framework/frontend/src/styles/sidebar.scss
+++ b/framework/frontend/src/styles/sidebar.scss
@@ -1,3 +1,5 @@
+@use 'src/styles/variables.module' as variables;
+
 svg {
   vertical-align: text-bottom !important;
 }
@@ -5,14 +7,14 @@ svg {
   .main-container {
     // min-height: 100%;
     transition: margin-left 0.28s;
-    margin-left: $sideBarWidth;
+    margin-left: variables.$sideBarWidth;
     position: relative;
   }
 
   .sidebar-container {
     transition: width 0.28s;
-    width: $sideBarWidth !important;
-    background-color: $menuBg;
+    width: variables.$sideBarWidth !important;
+    background-color: variables.$menuBg;
     height: calc(100vh - 60px);
     padding-top: 15px;
     position: absolute;
@@ -70,25 +72,25 @@ svg {
     .submenu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
-        color: $menuHover !important;
+        color: variables.$menuHover !important;
       }
     }
 
     // .is-active > .el-sub-menu__title {
-    //   color: $subMenuActiveText !important;
+    //   color: variables.$subMenuActiveText !important;
     // }
 
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
-      min-width: $sideBarWidth !important;
-      background-color: $subMenuBg !important;
+      min-width: variables.$sideBarWidth !important;
+      background-color: variables.$subMenuBg !important;
 
       &:hover {
-        color: $subMenuHover !important;
+        color: variables.$subMenuHover !important;
       }
     }
     .el-menu-item.is-active {
-      border-right: 3px solid $subMenuHover;
+      border-right: 3px solid variables.$subMenuHover;
       background: #e8f3ff !important;
     }
   }
@@ -159,7 +161,7 @@ svg {
   }
 
   .el-menu--collapse .el-menu .el-sub-menu {
-    min-width: $sideBarWidth !important;
+    min-width: variables.$sideBarWidth !important;
   }
 
   // mobile responsive
@@ -170,14 +172,14 @@ svg {
 
     .sidebar-container {
       transition: transform 0.28s;
-      width: $sideBarWidth !important;
+      width: variables.$sideBarWidth !important;
     }
 
     &.hideSidebar {
       .sidebar-container {
         pointer-events: none;
         transition-duration: 0.3s;
-        transform: translate3d(-$sideBarWidth, 0, 0);
+        transform: translate3d(- variables.$sideBarWidth, 0, 0);
       }
     }
   }
@@ -206,8 +208,8 @@ svg {
   .el-menu-item {
     &:hover {
       background-color: #ffffff;
-      // you can use $subMenuHover
-      color: $menuHover !important;
+      // you can use variables.$subMenuHover
+      color: variables.$menuHover !important;
     }
   }
 
@@ -250,4 +252,4 @@ body[layout="mix"] {
     margin-right: 16px;
   }
 
-}
+}
\ No newline at end of file
diff --git a/framework/frontend/vite.config.ts b/framework/frontend/vite.config.ts
index 7b198e2..e458fbb 100644
--- a/framework/frontend/vite.config.ts
+++ b/framework/frontend/vite.config.ts
@@ -39,6 +39,14 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       alias: {
         '@': path.resolve('./src')
       }
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          silenceDeprecations: ['legacy-js-api'],
+          api: 'modern-compiler' // 使用现代API
+        }
+      }
     }
   };
-};
+};
\ No newline at end of file