<p>J'utilise Vue.js avec Vitest et sass Loader. </p> <p>Lorsque j'utilise <code>@use 'sass:color'</code> dans un fichier ou un composant scss en ligne, il semble écraser le <code>vite.config.ts</ La variable de <code>css.preprocessorOptions.scss.additionalData</code> défini dans le fichier code> </p> <p>Le problème est reproduit ici : https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src%2Fstyle%2Fsample.scss</p> <p>Pour référence future, les paramètres sont les suivants : </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 { definitionConfig } depuis 'vite'; importer la vue depuis '@vitejs/plugin-vue' ; // https://vitejs.dev/config/ exporter la définition par défaut ({ plugins : [vue()], css : { Options du préprocesseur : { scss : { additionnelData : `@use "./src/style/vars.scss" comme *;`, }, }, }, });</pré> <p><strong>./src/style/sample.scss</strong></p> <pre class="brush:php;toolbar:false;">@use 'sass:color'; .sample-style { couleur : $sample-var ; }</pré> <p><strong>Composant</strong> :</p> <pre class="brush:php;toolbar:false;"><configuration du script> </script> <modèle> <div class="sample-style">Bonjour exemple de style</div> </modèle> <style lang="scss" scoped> @import '../style/sample.scss'; </style></pre> <p>En utilisant ce code, j'obtiens une erreur <code>Variable non définie.</code> dans <code>$sample-var</code> </p> <p>Cependant, si je commente <code>@use 'sass:color';</code>, cela fonctionne comme prévu (je peux accéder à <code>$sample- var</code>). </p> <p>Que se passe-t-il ici ? Comment importer correctement <code>sass:color</code> dans mon style de composant tout en utilisant <code>additionalData</code> dans <code>vite.config.js</code> au niveau mondial ? Je souhaite en savoir plus sur les meilleures pratiques. </p>

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

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