fix：修改sass运行警告问题

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;

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>

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;

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%;

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;
     }
   }
 

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
+        }
+      }
     }
   };
 };