diff --git a/src/styles/base.scss b/src/styles/base.scss
index c80b245..69cbf57 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 c326a7c..5d6b3ed 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 0971ac3..ba05922 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 11bdb28..2f12042 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',
         },
       },