Ajoutez efficacement du CSS global à l'aide de Nuxt 3 et Vite

Question

J'ai inclus Global Sass dans mon projet, mais je ne trouve pas de moyen efficace de l'ajouter à mon projet.

Il semble exister deux manières courantes d'ajouter du CSS à votre projet.

invite : {
    plugins : [svgLoader()],
    css : {
        Options du préprocesseur : {
            scss : {
                Données supplémentaires : `
                  @import "~/assets/styles/main.scss";
          ',

            },
        },
    },</pré>
<p>L'utilisation de vite semble fonctionner, mais elle semble également s'injecter dans chaque composant que j'utilise, donc lorsque je construis le projet, je peux voir mon CSS répété plusieurs fois, certains fichiers jusqu'à 300 secondes. Le problème a été trouvé du côté des vites https://github.com/vitejs/vite/issues/4448</p>
<pre class="brush:php;toolbar:false;">css : ["@/assets/styles/main.scss"],

Les options ci-dessus ne semblent pas faire cela pour chaque composant, mais sass de portée normale dans le fichier .vue ne récupère pas les variables sass et les mixins lors de la compilation avec cette méthode

Answer 1

Utilisez additionalData pour l'ajouter à chaque page. Ce projet ne fonctionne qu'avec les mixns et vars, qui ne sont pas convertis en CSS permanent lors de la construction.

En gros, utilisez simplement vars dans les mixins dans additionalData中的mixins中使用vars，然后在css, puis utilisez votre global.scss dans css