Глобальные стили переопределяются стилями Vant с использованием Nuxt. ⇐ CSS

[Anonymous]

Я пишу код с помощью Nuxt. Меня смущает импорт глобальных стилей.
Я использую Vant (библиотека пользовательского интерфейса) и Sass в своем проекте.
Я определил несколько простых стилей в '/assets/styles/main.scss', например:

Код: Выделить всё

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

И я использую компоненты Vant на своих страницах(/pages/index.vue), вот так:

Код: Выделить всё

Test

Кнопка отображается правильно, но стили тела переопределяются стилями Vant.
Снимок экрана стиля тела
Потому что файл `base.css` Vant включает настройки стиля для элемента `body`, но мой "main.scss" находится перед "base.css".
Скриншот таблицы стилей
Это моя конфигурация nuxt:

Код: Выделить всё

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

Что я пробовал:

• Удалить параметр CSS конфигурации nuxt, импортировать «main.scss» в «app.vue».

Код: Выделить всё

// app.vue

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

• Удалить параметр CSS конфигурации nuxt, импортировать «main.scss» в «app.vue»

Код: Выделить всё

// app.vue

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

• Удалить параметр CSS конфигурации nuxt, добавить «vite.css.preprocessorOptions.scss.additionalData» в конфигурацию nuxt

Код: Выделить всё

// 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 *;`,
},
},
},
},
});

Ничего из вышеперечисленного не помогло. Я не знаю, как заставить main.scss загружаться после base.css Ванта. Таким образом, мои стили будут иметь более высокий приоритет. Есть ли у кого-нибудь предложения? Помогитепппппппппп


Подробнее здесь: https://stackoverflow.com/questions/798 ... using-nuxt