diff --git a/src/styles/base.scss b/src/styles/base.scss
index c80b2455c5636f4d809741321f34a23437d8bb44..69cbf576429ca9d39d1b8cb380968168c9d2e77b 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -1,4 +1,4 @@
-@import './var.scss';
+@use './var.scss' as *;
 
 body {
   --margin: 14px; // 通用外边距
diff --git a/src/styles/global.scss b/src/styles/global.scss
index c326a7cf32ec70fbe8d2a2330cfab6aef7a6d290..5d6b3edf73537e14525229ce5e168128c62847a5 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,5 +1,5 @@
 /* 全局样式 */
-@import './var.scss';
+@use './var.scss' as *;
 
 .w-full {
   width: 100%;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0971ac3580a341e0da7b4da2f3577f3af5dfb3d4..ba05922482fad8be052f1124fcf0085b23bc2443 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,17 +1,17 @@
 // 基础样式
-@import './base.scss';
+@use './base.scss' as *;
 
 // 全局类名样式
-@import './global.scss';
+@use './global.scss' as *;
 
 // 自定义原生滚动条样式
-@import './scrollbar-reset.scss';
+@use './scrollbar-reset.scss' as *;
 
 // 自定义 nprogress 插件进度条颜色
-@import './nprogress.scss';
+@use './nprogress.scss' as *;
 
 // 富文本的css主题颜色变量
-@import './editor.scss';
+@use './editor.scss' as *;
 
 // 动画类名
-@import './animated.scss';
+@use './animated.scss' as *;
diff --git a/vite.config.ts b/vite.config.ts
index 11bdb28679c0f39ec6a710ed158fcb3d9ea6997e..2f12042d1bbb59990eb0527518d8053cd1ee3e68 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,7 +19,7 @@ export default defineConfig(({ command, mode }) => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: `@import "@/styles/var.scss";`,
+          additionalData: `@use "@/styles/var.scss" as *;`,
           api: 'modern-compiler',
         },
       },