Die Verwendung von @use 'sass:color' in meiner Vue.js/Vite-App führt dazu, dass über „additionalData“ importierte Variablen unbrauchbar werden
<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>
