diff --git a/src/components/bpmnProcessDesigner/package/theme/element-variables.scss b/src/components/bpmnProcessDesigner/package/theme/element-variables.scss
index 49bd326d..0646f8e1 100644
--- a/src/components/bpmnProcessDesigner/package/theme/element-variables.scss
+++ b/src/components/bpmnProcessDesigner/package/theme/element-variables.scss
@@ -5,7 +5,7 @@ $--color-danger: #ff4d4f;
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
-@import '~element-ui/packages/theme-chalk/src/index';
+@use '~element-ui/packages/theme-chalk/src/index';
 
 .el-table td,
 .el-table th {
diff --git a/src/components/bpmnProcessDesigner/package/theme/index.scss b/src/components/bpmnProcessDesigner/package/theme/index.scss
index 2e60fad4..0c77cfa2 100644
--- a/src/components/bpmnProcessDesigner/package/theme/index.scss
+++ b/src/components/bpmnProcessDesigner/package/theme/index.scss
@@ -1,2 +1,2 @@
-@import './process-designer.scss';
-@import './process-panel.scss';
+@use './process-designer.scss';
+@use './process-panel.scss';
diff --git a/src/components/bpmnProcessDesigner/package/theme/process-designer.scss b/src/components/bpmnProcessDesigner/package/theme/process-designer.scss
index 6af945da..b1ff0af3 100644
--- a/src/components/bpmnProcessDesigner/package/theme/process-designer.scss
+++ b/src/components/bpmnProcessDesigner/package/theme/process-designer.scss
@@ -1,6 +1,6 @@
-@import 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
-@import 'bpmn-js-token-simulation/assets/css/font-awesome.min.css';
-@import 'bpmn-js-token-simulation/assets/css/normalize.css';
+@use 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
+@use 'bpmn-js-token-simulation/assets/css/font-awesome.min.css';
+@use 'bpmn-js-token-simulation/assets/css/normalize.css';
 
 // 边框被 token-simulation 样式覆盖了
 .djs-palette {
diff --git a/src/styles/global.module.scss b/src/styles/global.module.scss
index 8448a924..af793f03 100644
--- a/src/styles/global.module.scss
+++ b/src/styles/global.module.scss
@@ -1,4 +1,4 @@
-@import './variables.scss';
+@use './variables.scss' as *;
 // 导出变量
 :export {
   namespace: $namespace;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 766f983e..7607941c 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,7 +1,7 @@
-@import './var.css';
-@import './FormCreate/index.scss';
-@import './theme.scss';
-@import 'element-plus/theme-chalk/dark/css-vars.css';
+@use './var.css';
+@use './FormCreate/index.scss';
+@use './theme.scss';
+@use 'element-plus/theme-chalk/dark/css-vars.css';
 
 .reset-margin [class*='el-icon'] + span {
   margin-left: 2px !important;
diff --git a/vite.config.ts b/vite.config.ts
index 3ef21f26..57611ce6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -43,7 +43,7 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
         css: {
             preprocessorOptions: {
                 scss: {
-                    additionalData: '@import "./src/styles/variables.scss";',
+                    additionalData: '@use "@/styles/variables.scss" as *;',
                     javascriptEnabled: true
                 }
             }