在我的Vue.js / Vite应用程序中使用@use 'sass:color'会导致通过additionalData导入的变量无法使用

Question

我正在使用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使一组变量在全局范围内可访问？我对了解最佳实践很感兴趣。

Answer 1

在组件的<style>标签前，additionalData中定义的Scss代码会被添加。因此，Sass编译器最终处理的内容是：

@use "./src/style/vars.scss" as *;
@import '../style/sample.scss';

根据文档，当sample.scss不包含任何@use语句时：

这意味着上述代码的评估方式类似于：

@use "./src/style/vars.scss" as *;
.sample-style {
  color: $sample-var;
}

然而，根据导入模块系统文件的文档（重点在于我）：

$sample-var是一个模块的成员，因此sample.scss无法访问$sample-var。