如何在Nuxt3中仅引入一次SCSS Mixins而非每个文件重复引入？

文件结构 #

assets
  scss
    _mixins.scss
    _class-one.scss
    _class-two.scss
    _class-three.scss
    main.scss

当前main.scss内容 #

@use "class-one.scss";
@use "class-two.scss";
@use "class-three.scss";

当前有效用法 #

在每个class-*.scss文件中单独引入mixins，就能正常调用混合宏：

@use 'mixins';

.class-one {
  @include mixins.the-mixin;
}

需求与问题 #

希望仅在main.scss中引入一次mixins，让所有子文件共享，但这样会触发报错：

Error: 找不到命名空间为"mixins"的模块。

尝试过的全局注入方案（无效） #

通过Nuxt3的Vite配置尝试全局注入mixins，配置代码如下：

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/scss/_mixins.scss" as mixins;'
        }
      }
    }
  }
})

添加该配置后，依然出现相同的错误：找不到命名空间为"mixins"的模块。

特殊冲突场景 #

如果同时保留上述Vite配置，并且在class-*.scss文件中继续使用@use 'mixins'，会触发新的报错：

ERROR [sass] 已存在命名空间为"mixins"的模块。

内容的提问来源于stack exchange，提问作者Saro