vite+vue3项目中，单个组件中使用 @use报错

报错信息：

[plugin:vite:css] [sass] @use rules must be written before any other rules.

@use 官方说明 注意事项：

https://sass-lang.com/documentation/at-rules/use/

样式表中的 @use 规则必须位于所有其他规则（除 @forward 外）之前，包括样式规则。但允许在 @use 规则前声明变量，以便后续用于模块配置。

但是我在项目组件中使用，是在第一行位置，为什么还报错呢？

定位问题

vite.config.ts 这个配置文件中，通过 additionalData 配置，系统会自动在每个 SCSS 文件的开头注入 @import “@/assets/styles/variables.scss”; 这行代码。

这个和@use必须在scss文件的第一行冲突，所以页面会报错。

解决问题：

additionalData 中的导入方式改成scss的 @use 即可。