覆盖Vuetify的$container-max-widths时，$grid-breakpoints未生效求排查

我尝试覆盖Vuetify的$container-max-widths变量，Vuetify原生的变量设置逻辑如下：

$container-max-widths: () !default;
$container-max-widths: map-deep-merge(
  (
    'xs': null,
    'sm': null,
    'md': map.get($grid-breakpoints, 'md') * 0.9375,
    'lg': map.get($grid-breakpoints, 'lg') * 0.9375,
    'xl': map.get($grid-breakpoints, 'xl') * 0.9375,
    'xxl': map.get($grid-breakpoints, 'xxl') * 0.9375,
  ),
  $container-max-widths
);

我以为需要先覆盖$grid-breakpoints才能修改$container-max-widths，于是在src/styles/main.scss里写了以下代码：

// src/styles/main.scss

@use "vuetify" with (
  $grid-breakpoints: (
    "md": 960px,
    "lg": 960px,
    "xl": 960px,
    "xxl": 960px
  )
);

我的需求是让md及以上断点的容器最大宽度保持一致，但测试v-container时发现max-width并没有更新，请问哪里操作错了？

问题根源 #

你仅覆盖了$grid-breakpoints，但未直接指定$container-max-widths的自定义值。Vuetify的map-deep-merge逻辑会将传入的自定义$container-max-widths与默认值合并，但你当前未传入该变量，因此仍会沿用默认的计算逻辑——即便修改了断点值，也可能因编译顺序或样式优先级问题未生效。

正确修改方式 #

直接在@use "vuetify" with中同时覆盖$grid-breakpoints和$container-max-widths，明确指定每个断点的容器宽度：

// src/styles/main.scss

@use "vuetify" with (
  $grid-breakpoints: (
    "md": 960px,
    "lg": 960px,
    "xl": 960px,
    "xxl": 960px
  ),
  $container-max-widths: (
    'md': 960px * 0.9375, // 也可直接写固定值900px
    'lg': 960px * 0.9375,
    'xl': 960px * 0.9375,
    'xxl': 960px * 0.9375
  )
);

若希望所有断点的容器宽度完全一致，可直接写固定值：

$container-max-widths: (
  'md': 900px,
  'lg': 900px,
  'xl': 900px,
  'xxl': 900px
)

额外注意事项 #

• 确保main.scss在Vuetify原生样式之前引入，或在项目的Vuetify配置中正确指定自定义样式文件路径。
• 可通过浏览器开发者工具检查v-container的样式，确认是否有其他样式规则覆盖了max-width属性。

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