<p>Ich verwende Vue.js mit Vitest und Sass Loader. </p> <p>Wenn ich <code>@use 'sass:color'</code> in einer Inline-SCSS-Datei oder -Komponente verwende, scheint es die Variable von <code>vite.config.ts</ zu überschreiben <code>css.preprocessorOptions.scss.additionalData</code> </p> <p>Das Problem wird hier reproduziert: https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src%2Fstyle%2Fsample.scss</p> <p>Zur späteren Bezugnahme lauten die Einstellungen wie folgt: </p> <p><strong>./src/style/vars.scss</strong></p> <pre class="brush:php;toolbar:false;">$sample-var: red;</pre> <p><strong>vite.config.js</strong></p> <pre class="brush:php;toolbar:false;">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 *;`, }, }, }, });</pre> <p><strong>./src/style/sample.scss</strong></p> <pre class="brush:php;toolbar:false;">@use 'sass:color'; .sample-style { Farbe: $sample-var; }</pre> <p><strong>Komponente</strong>:</p> <pre class="brush:php;toolbar:false;"><script setup> </script> <Vorlage> <div class="sample-style">Hallo Beispielstil</div> </template> <style lang="scss" Scoped> @import '../style/sample.scss'; </style></pre> <p>Bei Verwendung dieses Codes erhalte ich den Fehler <code>Undefinierte Variable.</code> in <code>$sample-var</code> </p> <p>Wenn ich jedoch <code>@use 'sass:color';</code> auskommentiere, funktioniert es wie erwartet (ich kann auf <code>$sample-var</code> zugreifen). </p> <p>Was passiert hier? Wie importiere ich <code>sass:color</code> richtig in meinem Komponentenstil, während ich <code>additionalData</code> in <code>vite.config.js</code> verwende? global? Ich bin daran interessiert, mehr über Best Practices zu erfahren. </p>

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

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