Fügen Sie mit Nuxt 3 und Vite effizient globales CSS hinzu

Question

In meinem Projekt ist globales Sass enthalten, aber ich finde keine effiziente Möglichkeit, es zu meinem Projekt hinzuzufügen.

Es scheint zwei beliebte Möglichkeiten zu geben, CSS zu Ihrem Projekt hinzuzufügen.

vite: {
    Plugins: [svgLoader()],
    CSS: {
        Präprozessoroptionen: {
            scss: {
                zusätzlicheDaten: `
                  @import "~/assets/styles/main.scss";
          `,

            },
        },
    },

Die Verwendung von Vite scheint zu funktionieren, aber es scheint sich auch in jede Komponente einzuschleusen, die ich verwende. Wenn ich also das Projekt erstelle, kann ich sehen, dass mein CSS mehrmals wiederholt wird und einige Dateien bis zu 300 Sekunden lang sind. Das Problem wurde auf der Vites-Seite gefunden: https://github.com/vitejs/vite/issues/4448

css: ["@/assets/styles/main.scss"],

Die oben genannten Optionen scheinen dies nicht für jede Komponente zu bewirken, aber Sass mit normalem Gültigkeitsbereich in der .vue-Datei erfasst beim Kompilieren mit dieser Methode keine Sass-Variablen und Mixins

Answer 1

使用additionalData将其添加到每个页面。该项目仅适用于 mixns 和 vars，它们在构建时不会转换为永久 css。

基本上只在additionalData中的mixins中使用vars，然后在css中使用你的global.scss