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