Die Verwendung von @use 'sass:color' in meiner Vue.js/Vite-App führt dazu, dass über „additionalData' importierte Variablen unbrauchbar werden

Question

Ich verwende Vue.js mit Vitest und Sass Loader.

Wenn ich @use 'sass:color' in einer Inline-SCSS-Datei oder -Komponente verwende, scheint es die Variable von vite.config.tscss.preprocessorOptions.scss.additionalData

Das Problem wird hier reproduziert: https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src%2Fstyle%2Fsample.scss

Zur späteren Bezugnahme lauten die Einstellungen wie folgt:

./src/style/vars.scss

$sample-var: red;

vite.config.js

import { defineConfig } from 'vite';
vue aus „@vitejs/plugin-vue“ importieren;

// https://vitejs.dev/config/
Standard exportieren defineConfig({
  Plugins: [vue()],
  CSS: {
    Präprozessoroptionen: {
      scss: {
        zusätzlicheDaten: `@use „./src/style/vars.scss“ als *;`,
      },
    },
  },
});

./src/style/sample.scss

@use 'sass:color';

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

Komponente:

<script setup>

</script>

<Vorlage>
  <div class="sample-style">Hallo Beispielstil</div>
</template>

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

Bei Verwendung dieses Codes erhalte ich den Fehler Undefinierte Variable. in $sample-var

Wenn ich jedoch @use 'sass:color'; auskommentiere, funktioniert es wie erwartet (ich kann auf $sample-var zugreifen).

Was passiert hier? Wie importiere ich sass:color richtig in meinem Komponentenstil, während ich additionalData in vite.config.js verwende? global? Ich bin daran interessiert, mehr über Best Practices zu erfahren.

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。