Vuetify 3 + Nuxt 3全局覆盖Grid Breakpoints失效问题

核心问题分析 #

你遇到的问题源于自定义SCSS变量加载顺序晚于Vuetify默认样式，导致变量覆盖未生效。仅在app.vue中引入自定义样式无法让Vuetify在初始化阶段读取你的断点配置。

解决方案步骤 #

1. 调整Nuxt中Vuetify的配置

修改nuxt.config.ts，指定Vuetify优先加载你的自定义变量文件，确保变量在框架样式之前被读取：

export default defineNuxtConfig({
  modules: ['@nuxtjs/vuetify'],
  vuetify: {
    styles: {
      // 指定自定义变量文件路径
      configFile: './assets/styles/vuetify-variables.scss'
    }
  }
})

2. 编写正确的自定义变量文件

在./assets/styles/下创建vuetify-variables.scss，通过@forward语法重写断点变量：

// 重写Vuetify断点配置
@forward 'vuetify/settings' with (
  $grid-breakpoints: (
    xs: 0,
    sm: 600px,
    md: 900px,
    lg: 1024px, // 设置目标lg断点值
    xl: 1920px,
    xxl: 2560px
  )
);

3. 移除冗余样式引入

删除app.vue中对自定义样式的导入代码（例如@import './assets/styles/main.scss'），避免样式加载顺序冲突。

4. 清除缓存并重启项目

Nuxt缓存可能残留旧配置，执行以下操作后重启项目：

• 删除.nuxt文件夹
• 删除node_modules/.cache文件夹
• 重新运行npm run dev

5. 验证配置生效

打开浏览器开发者工具，查看v-col元素的CSS类，确认lg对应的媒体查询为@media (min-width: 1024px)，而非默认的1280px。

额外注意事项 #

• 确保安装SCSS依赖：执行npm install sass sass-loader@10（sass-loader@10版本与Nuxt 3兼容性更稳定）
• 不要在自定义变量文件中引入Vuetify完整样式，Nuxt的Vuetify模块会自动处理样式加载流程

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