优化打包构建样式错误

exam-vue/src/layout/index.vue

@@ -63,8 +63,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "@/styles/mixin.scss";
-  @import "@/styles/variables.scss";
+  @use "@/styles/mixin.scss" as *;
+  @use "@/styles/variables.scss" as *;
 
   .app-wrapper {
     @include clearfix;

exam-vue/src/styles/btn.scss

@@ -3,7 +3,7 @@
 // @author D吕贺034244311
 // @date 20260615
 // ========================================
-@import './variables.scss';
+@use './variables.scss' as v;
 
 @mixin colorBtn($color) {
   background: $color;
@@ -19,31 +19,31 @@
 }
 
 .blue-btn {
-  @include colorBtn($blue)
+  @include colorBtn(v.$blue)
 }
 
 .light-blue-btn {
-  @include colorBtn($light-blue)
+  @include colorBtn(v.$light-blue)
 }
 
 .red-btn {
-  @include colorBtn($red)
+  @include colorBtn(v.$red)
 }
 
 .pink-btn {
-  @include colorBtn($pink)
+  @include colorBtn(v.$pink)
 }
 
 .green-btn {
-  @include colorBtn($green)
+  @include colorBtn(v.$green)
 }
 
 .tiffany-btn {
-  @include colorBtn($tiffany)
+  @include colorBtn(v.$tiffany)
 }
 
 .yellow-btn {
-  @include colorBtn($yellow)
+  @include colorBtn(v.$yellow)
 }
 
 .pan-btn {

exam-vue/src/styles/index.scss

@@ -3,12 +3,12 @@
 // @author D吕贺034244311
 // @date 20260615
 // ========================================
-@import './variables.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
-@import './btn.scss';
+@use './variables.scss' as *;
+@use './mixin.scss' as *;
+@use './transition.scss';
+@use './element-ui.scss';
+@use './sidebar.scss';
+@use './btn.scss';
 
 body {
   height: 100%;

exam-vue/src/styles/sidebar.scss

@@ -3,19 +3,21 @@
 // @author D吕贺034244311
 // @date 20260615
 // ========================================
+@use './variables.scss' as v;
+
 #app {
 
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
-    margin-left: $sideBarWidth;
+    margin-left: v.$sideBarWidth;
     position: relative;
   }
 
   .sidebar-container {
     transition: width 0.28s;
-    width: $sideBarWidth !important;
-    background-color: $menuBg;
+    width: v.$sideBarWidth !important;
+    background-color: v.$menuBg;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -72,21 +74,21 @@
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: $menuHover !important;
+        background-color: v.$menuHover !important;
       }
     }
 
     .is-active>.el-submenu__title {
-      color: $subMenuActiveText !important;
+      color: v.$subMenuActiveText !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
-      min-width: $sideBarWidth !important;
-      background-color: $subMenuBg !important;
+      min-width: v.$sideBarWidth !important;
+      background-color: v.$subMenuBg !important;
 
       &:hover {
-        background-color: $subMenuHover !important;
+        background-color: v.$subMenuHover !important;
       }
     }
   }
@@ -145,7 +147,7 @@
   }
 
   .el-menu--collapse .el-menu .el-submenu {
-    min-width: $sideBarWidth !important;
+    min-width: v.$sideBarWidth !important;
   }
 
   // mobile responsive
@@ -156,14 +158,15 @@
 
     .sidebar-container {
       transition: transform .28s;
-      width: $sideBarWidth !important;
+      width: v.$sideBarWidth !important;
     }
 
     &.hideSidebar {
       .sidebar-container {
         pointer-events: none;
         transition-duration: 0.3s;
-        transform: translate3d(-$sideBarWidth, 0, 0);
+        $sw: v.$sideBarWidth;
+        transform: translate3d(-$sw, 0, 0);
       }
     }
   }
@@ -188,8 +191,8 @@
   .nest-menu .el-submenu>.el-submenu__title,
   .el-menu-item {
     &:hover {
-      // you can use $subMenuHover
-      background-color: $menuHover !important;
+      // you can use v.$subMenuHover
+      background-color: v.$menuHover !important;
     }
   }
 

exam-vue/src/views/login/components/LoginLayout.vue

@@ -44,7 +44,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "@/styles/login.scss";
+@use "@/styles/login.scss";
 
 </style>