我之前也碰到过这个一模一样的头疼问题！单纯调整css数组的顺序确实没用，因为Vuetify作为Nuxt模块时，它的样式会被框架自动注入到你的自定义样式之后，不管你怎么排数组顺序都绕不开这个机制。不过有两个靠谱的解决方案：

方案一：禁用Vuetify自动注入样式，手动控制加载顺序 #

这是最直接的方法，核心思路是先关掉Vuetify自动加载样式的功能，然后手动把Vuetify的CSS放在自定义样式前面引入：

在你的nuxt.config.js（如果是Nuxt 3就是nuxt.config.ts）里这么配置：

export default {
  modules: ['@nuxtjs/vuetify'],
  vuetify: {
    css: false // 关键：禁用Vuetify自动注入默认样式
  },
  css: [
    // 先手动引入Vuetify的CSS文件，路径根据你的安装方式调整
    'vuetify/dist/vuetify.min.css',
    // 再引入你的自定义样式，顺序不能乱
    '~/assets/style/main.scss',
    '~/assets/style/app.styl'
  ]
}

这样就能保证Vuetify的基础样式先加载，你的自定义样式后加载，自然就能覆盖它的默认样式了。

方案二：通过SCSS嵌套引入Vuetify样式（适合用自定义主题的场景） #

如果你在用Vuetify的SCSS变量或者自定义主题，可以直接在你的主SCSS文件里先引入Vuetify的源样式，再写自己的自定义代码：

比如在~/assets/style/main.scss里：

// 先引入Vuetify的SCSS核心样式（需要确保你安装了Vuetify的SCSS依赖）
@import '~vuetify/src/styles/main.sass';

// 接下来写你的自定义样式，这里的样式会自动覆盖Vuetify的默认值
.custom-button {
  background-color: #your-custom-color;
  border-radius: 8px;
}

然后在nuxt.config.js里只引入这个main.scss，同时记得把Vuetify的css设为false：

export default {
  modules: ['@nuxtjs/vuetify'],
  vuetify: {
    css: false
  },
  css: [
    '~/assets/style/main.scss'
  ]
}

额外注意事项 #

• 如果你用的是Nuxt 3，Vuetify模块的配置方式略有不同，但核心逻辑一样：在modules里的vuetify选项中设置css: false，然后手动控制样式加载顺序。
• 检查一下你的组件里有没有单独引入Vuetify的样式，避免重复加载导致样式优先级混乱。

内容的提问来源于stack exchange，提问作者drake035