L'utilisation de @use 'sass:color' dans mon application Vue.js/Vite rend les variables importées via supplementData inutilisables

Question

J'utilise Vue.js avec Vitest et sass Loader.

Lorsque j'utilise @use 'sass:color' dans un fichier ou un composant scss en ligne, il semble écraser le vite.config.tscss.preprocessorOptions.scss.additionalData défini dans le fichier code>

Le problème est reproduit ici : https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src%2Fstyle%2Fsample.scss

Pour référence future, les paramètres sont les suivants :

./src/style/vars.scss

$sample-var: red;

vite.config.js

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>

En utilisant ce code, j'obtiens une erreur Variable non définie. dans $sample-var

Cependant, si je commente @use 'sass:color';, cela fonctionne comme prévu (je peux accéder à $sample- var).

Que se passe-t-il ici ? Comment importer correctement sass:color dans mon style de composant tout en utilisant additionalData dans vite.config.js au niveau mondial ? Je souhaite en savoir plus sur les meilleures pratiques.

Answer 1

Le code Scss défini dans le <style>标签前，additionalData du composant sera ajouté. Donc, ce que le compilateur Sass finit par traiter est :

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

Selon la documentation , lorsque la sample.scss不包含任何@use déclaration :

Cela signifie que le code ci-dessus est évalué comme :

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

Cependant, selon la documentation pour l'importation de fichiers système de module (c'est moi qui souligne) :

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