style: 将scss 的@import替换为@use

src/assets/styles/btn.scss

@@ -1,4 +1,4 @@
-// @import './variables.module.scss';
+@use './custom-variables.scss' as *;
 
 @mixin colorBtn($color) {
   background: $color;

src/assets/styles/custom-variables.scss

@@ -32,11 +32,11 @@ $base-sub-menu-background: #1f2d3d;
 $base-sub-menu-hover: #001528;
 
 // 组件变量
-$--color-primary: #409EFF;
-$--color-success: #67C23A;
-$--color-warning: #E6A23C;
-$--color-danger: #F56C6C;
-$--color-info: #909399;
+$color-primary: #409EFF;
+$color-success: #67C23A;
+$color-warning: #E6A23C;
+$color-danger: #F56C6C;
+$color-info: #909399;
 
 // :export {
 //   menuText: $menuText;

src/assets/styles/index.scss

@@ -1,10 +1,10 @@
-@import './variables.module.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
-@import './btn.scss';
-@import './ruoyi.scss';
+// @use './variables_custom.scss' as *;
+@use './mixin.scss';
+@use './transition.scss';
+@use './element-ui.scss';
+@use './sidebar.scss';
+@use './btn.scss';
+@use './ruoyi.scss';
 
 body {
   height: 100%;

src/assets/styles/sidebar.scss

@@ -1,3 +1,4 @@
+@use "@/assets/styles/custom-variables.scss" as *;
 #app {
 
   .main-container {

src/assets/styles/variables.module.scss

@@ -1,4 +1,4 @@
-@import './variables_custom.scss';
+@use './custom-variables.scss' as *;
 
 :export {
   menuText: $menuText;
@@ -20,9 +20,9 @@
   yellow: $yellow;
   panGreen: $panGreen;
   // 导出组件颜色
-  colorPrimary: $--color-primary;
-  colorSuccess: $--color-success;
-  colorWarning: $--color-warning;
-  colorDanger: $--color-danger;
-  colorInfo: $--color-info;
+  colorPrimary: $color-primary;
+  colorSuccess: $color-success;
+  colorWarning: $color-warning;
+  colorDanger: $color-danger;
+  colorInfo: $color-info;
 }

src/layout/components/Sidebar/Logo.vue

@@ -2,7 +2,7 @@
  * @Author: chris
  * @Date: 2025-01-13 09:34:10
  * @LastEditors: chris
- * @LastEditTime: 2025-08-14 11:45:12
+ * @LastEditTime: 2025-10-27 16:18:07
 -->
 <template>
   <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
@@ -53,8 +53,6 @@ const getLogoTextColor = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-// @import '@/assets/styles/variables.module.scss';
-
 .sidebarLogoFade-enter-active {
   transition: opacity 1.5s;
 }

src/layout/index.vue

@@ -66,8 +66,8 @@ function setLayout() {
 </script>
 
 <style lang="scss" scoped>
-  @import "@/assets/styles/mixin.scss";
-  // @import "@/assets/styles/variables.module.scss";
+  @use "@/assets/styles/mixin.scss" as *;
+  // @use "@/assets/styles/variables.module.scss";
 
 .app-wrapper {
   @include clearfix;

src/views/pest/imgAnalysis/components/ImageDetail.vue

@@ -2,7 +2,7 @@
  * @Author: chris
  * @Date: 2025-08-12 11:19:45
  * @LastEditors: chris
- * @LastEditTime: 2025-10-15 14:58:52
+ * @LastEditTime: 2025-10-27 16:11:21
 -->
 <template>
   <div class="image-detail-module">
@@ -60,7 +60,7 @@ const props = defineProps({
 
   .num {
     @apply font-700;
-    color: $--color-danger;
+    color: $color-danger;
   }
 }
 

vite.config.js

@@ -2,7 +2,7 @@
  * @Author: chris
  * @Date: 2025-01-13 09:33:28
  * @LastEditors: chris
- * @LastEditTime: 2025-10-27 10:24:31
+ * @LastEditTime: 2025-10-27 16:02:23
  */
 import { defineConfig, loadEnv } from "vite";
 import path from "path";
@@ -63,7 +63,7 @@ export default defineConfig(({ mode, command }) => {
       preprocessorOptions: {
         scss: {
           silenceDeprecations: ["legacy-js-api"],
-          additionalData: `@import "@/assets/styles/variables_custom.scss";`,
+          additionalData: `@use "@/assets/styles/custom-variables.scss" as *;`,
         },
       },
     },