我正在使用Vue.js与Vitest和sass loader。

当我在内联的scss文件或组件中使用@use 'sass:color'时，它似乎会覆盖在vite.config.ts文件中设置的css.preprocessorOptions.scss.additionalData的变量。

问题在这里复现：https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src%2Fstyle%2Fsample.scss

供以后参考，设置如下：

./src/style/vars.scss

$sample-var: red;

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "./src/style/vars.scss" as *;`,
      },
    },
  },
});

./src/style/sample.scss

@use 'sass:color';

.sample-style {
  color: $sample-var;
}

组件:

<script setup>

</script>

<template>
  <div class="sample-style">Hello sample style</div>
</template>

<style lang="scss" scoped>
@import '../style/sample.scss';
</style>

使用这段代码，我在sample.scss中的$sample-var得到Undefined variable.的错误。

然而，如果我注释掉@use 'sass:color';，它会按预期工作（我可以在我的组件文件中访问$sample-var）。

这里发生了什么？我如何正确地在我的组件样式中导入sass:color，同时使用vite.config.js中的additionalData使一组变量在全局范围内可访问？我对了解最佳实践很感兴趣。