问题描述 #

我目前正在用 Nuxt + Vant UI 库 + Sass 开发项目，遇到了全局基础样式被 Vant 内置样式覆盖的问题，折腾了好几种方法都没解决，来求助各位大佬！

具体场景：
我在 /assets/styles/main.scss 里定义了 body 的基础样式：

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

在页面 /pages/index.vue 中使用 Vant 的按钮组件能正常渲染，但我自定义的 body 样式被划掉了——查了浏览器的样式面板才发现，Vant 的 base.css 里也对 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"],
});

我已经尝试过的方法 #

以下几种调整方式都试过了，但问题依然存在：

• 方法1：删掉 nuxt.config 里的 css 配置，在 app.vue 的 <style> 标签中导入

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

结果：样式顺序还是没变化，自定义样式依旧被覆盖

• 方法2：删掉 nuxt.config 里的 css 配置，在 app.vue 的 <script setup> 中导入

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

结果：和上面一样，加载顺序没调整过来

• 方法3：删掉 nuxt.config 里的 css 配置，通过 Vite 预处理器配置自动注入

// 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 依然在 Vant 的 base.css 之前加载，问题没解决

求助需求 #

我现在的核心诉求就是让自己的 main.scss 在 Vant 的 base.css 之后加载，这样自定义的 body 样式就能有更高优先级生效。有没有大佬遇到过类似问题？求指点解决思路，万分感谢！🙏