Globale Stile werden durch Vant-Stile mit Nuxt überschrieben ⇐ CSS

[Anonymous]

Ich programmiere mit Nuxt. Ich bin verwirrt über den Import globaler Stile.
Ich verwende Vant (UI-Bibliothek) und Sass in meinem Projekt.
Ich habe einige einfache Stile in „/assets/styles/main.scss“ definiert, etwa so:

Code: Select all

/* /assets/styles/main.scss */
body {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}

Und ich verwende Vants Komponenten in meinen Seiten (/pages/index.vue), etwa so:

Code: Select all

Test

Die Schaltfläche wird korrekt gerendert, aber die Stile des Körpers werden durch die Stile von Vant überschrieben.
Screenshot des Körperstils
Weil Vants „base.css“ Stileinstellungen für das „body“-Element enthält, aber mein „main.scss“ vor „base.css“ steht.
Screenshot des Stylesheets
Das ist meine Nuxt-Konfiguration:

Code: Select all

// nuxt.config.ts
export default defineNuxtConfig({
modules: ["@vant/nuxt"],
compatibilityDate: "2025-07-15",
devtools: { enabled: true },
css: ["@/assets/styles/main.scss"],
});

Was ich versucht habe:

• Nuxt-Konfigurations-CSS löschen-Option, „main.scss“ in von „app.vue“ importieren.

Code: Select all

// app.vue

@use "~/assets/styles/main.scss";

• Nuxt-Konfigurations-CSS löschen-Option, „main.scss“ in von „app.vue“ importieren

Code: Select all

// app.vue

import "~/assets/styles/main.scss";

• Nuxt-Konfigurations-CSS löschen-Option, „vite.css.preprocessorOptions.scss.additionalData“ in der Nuxt-Konfiguration hinzufügen

Code: Select all

// nuxt.config.ts
export default defineNuxtConfig({
modules: ["@vant/nuxt"],
compatibilityDate: "2025-07-15",
devtools: { enabled: true },
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~/assets/styles/main.scss" as *;`,
},
},
},
},
});

Keines der oben genannten Dinge hat funktioniert. Ich weiß nicht, wie ich main.scss nach Vant's base.css laden kann. Auf diese Weise haben meine Stile eine höhere Priorität. Hat jemand Vorschläge? Hilfepppppppp