Global styles are being overridden by Vant styles using Nuxt

I'm coding using Nuxt. I'm confused about the global styles import.

I using Vant(UI Library) and Sass in my project.

I've defined some simple styles in '/assets/styles/main.scss', like this:

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

And I use Vant's components in my pages(/pages/index.vue), like this:

<!-- /pages/index.vue -->
<template>
  <div>
    <van-button>Test</van-button>
  </div>
</template>

The button renders correctly, but the body's styles are being overridden by Vant's styles.

Screenshot of the body style

Because Vant‘s `base.css` that includes style settings for the `body` element, but my "main.scss“ is before “base.css”.

Screenshot of stylesheet

This is my nuxt configuration:

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

What I've tried:

Delete nuxt configuration css option, import "main.scss" in <style> of "app.vue".

// app.vue
<style lang="scss">
@use "~/assets/styles/main.scss";
</style>

Delete nuxt configuration css option, import "main.scss" in <script> of "app.vue"

// app.vue
<script setup lang="ts">
import "~/assets/styles/main.scss";
</script>

Delete nuxt configuration css option, add ''vite.css.preprocessorOptions.scss.additionalData" in nuxt configuration

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

None of the above worked. I don't know how to make main.scss load after Vant's base.css. This way, my styles will have higher priority. Does anyone have any suggestions? Helpppppppppp

Solution

I've just tested the second thing you've tried (using script tag to import css) on a new project that I setup following the guides and using exact same config you provided, and the styles were applied correctly (after vent styles), what problems are you facing on this option? Per Vent documentation on FAQ it should work fine. I can share more if needed, including a reproducible repo.

I should also mention you can work around by embracing the Vent way using vant variables:

You can directly override these CSS variables in the code, and the style of the Button component will change accordingly:

the Primary Button will turn red */

:root:root {
   --van-button-primary-background: red;
}

So, based on you specific example, changing body font-size and font-family you would need to override --van-base-font and --van-font-size-md (note there are multiple sizes) as per vent variables docs:

:root:root {
  --van-font-size-md: 14px;
  --van-base-font: Arial, Helvetica, sans-serif;
}

in this setup you can keep your src/assets/styles/main.css in the nuxt.config.ts css property as you did in your first example.

Obviously this is more limited since the specificity problem does not allow you to change everything freely, excluding the body selector, you can wrap your app in a div with an id and use it in your scss files to increase specificity.