必须在@import "bootstrap/scss/variables"之前重定义$grid-breakpoints并同步更新$container-max-widths，且BootstrapVue需额外配置breakpoints数组，否则断点不生效；键名须逐字节一致，Sass版本须为Dart Sass≥1.33。
必须在 @import "bootstrap/scss/variables" 之前重定义 $grid-breakpoints
改了变量但断点没生效？大概率是顺序错了。Bootstrap 5 的 $grid-breakpoints 是编译时静态生成所有响应式类（如 col-xl-6、d-lg-none）的源头，一旦 @import "bootstrap/scss/variables" 执行完毕，它的默认值就已固化，后续任何赋值都无效。
正确顺序只能是：
- 先
@import "bootstrap/scss/functions"（确保map-get等可用） - 紧接着直接写
$grid-breakpoints: ( ... ); - 再
@import "bootstrap/scss/variables" - 最后
@import "bootstrap/scss/bootstrap"
漏掉 functions 或把变量定义放在 variables 之后，Sass 编译器会静默回退到默认值，你写的 xxl: 1920px 就等于没写。
新增断点后 col-xxl-4 不生效？检查 $container-max-widths 是否同步更新
只改 $grid-breakpoints，不碰 $container-max-widths，会导致布局“卡住”：比如你加了 xxl: 1920px，但 $container-max-widths 里没有 xxl 键，.container 在 1920px 宽度下仍沿用 xl 的 1140px，左右大片留白。
立即学习“前端免费学习笔记（深入）”；
$container-max-widths 必须和 $grid-breakpoints 的非-xs 键严格对齐：
- 键名完全一致（大小写、连字符、引号都要一样）
-
xs不需要出现在$container-max-widths中（它默认是100%） - 值应略小于下一个断点，避免跳变（例如
xxl: 1920px对应xxl: 1880px）
示例：
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1440px, xxl: 1920px ); $container-max-widths: ( sm: 540px, md: 720px, lg: 992px, xl: 1380px, xxl: 1880px );
用了 BootstrapVue？光改 Sass 不够，还得配 breakpoints 数组
你在 HTML 里写了 <b-col xxl="4"> 却没反应？控制台大概率报 Unknown breakpoint 'xxl'。BootstrapVue 组件不解析 CSS，它靠 BVConfigPlugin 初始化时传入的 breakpoints 数组识别断点名。
必须显式配置，且数组内容要和 Sass 中 $grid-breakpoints 的键完全一致：
Vue.use(BVConfigPlugin, {
breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
});
常见错误：
- 数组里漏了
'xxl'，但 Sass 里加了——组件不认识这个 token - 数组用了
"2xl"（带引号字符串），但 Sass 里写的是2xl: 1600px（无引号 key）——匹配失败 - 顺序错乱（虽然不影响识别，但易引发维护困惑）
编译报错 Invalid CSS after "-breakpoints: (": expected expression？检查 Sass 版本和语法
这个错误几乎全是环境问题。Bootstrap 5.3+ 强制要求 Dart Sass ≥ 1.33，而 Node Sass 已废弃且不支持新 map 写法。
确认三件事：
- 运行
sass --version，输出必须是Dart Sass开头，且版本 ≥ 1.33 - 值必须带单位：
1440px✅，1440❌，"1440px"❌ - 键名必须合法 CSS 类名：只含字母、数字、连字符；不能以数字开头；不能含空格或特殊符号
如果用 Vite，确保装的是 @vitejs/plugin-sass 而非旧版 vite-plugin-sass；Webpack 用户请升级 sass-loader 到 v13+ 并确认 implementation 指向 dart-sass。
最常被忽略的点：两个 map 的键名对齐不是“差不多就行”，而是必须逐字节一致；还有就是 BootstrapVue 的 breakpoints 配置，它和 Sass 变量是两条独立链路，缺一不可。
