🐞 fix:@import 修改为 @use 以应对 sass 升级弃用 @import。

Author: halfpreschooler

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 {

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';

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 {

src/styles/global.module.scss

@@ -1,4 +1,4 @@
-@import './variables.scss';
+@use './variables.scss' as *;
 // 导出变量
 :export {
   namespace: $namespace;

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;

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
                 }
             }