Bootstrap 5.3+ 升级后变量重定义必须在 @import "bootstrap/scss/functions" 之前，theme-colors() 需显式导入 utilities/api，新增断点需同步更新 $grid-breakpoints 和 $container-max-widths 并手动设置组件断点。
升级 Bootstrap 5 后，$primary 等变量改了却没生效？不是 Sass 本身变了，而是你写的顺序被新版本更严格的依赖链卡住了——必须在 @import "bootstrap/scss/functions" 之前就完成变量重定义，否则所有改动静默失效。
变量重定义必须放在 functions 导入之前
Bootstrap 5.3+ 对 functions 的依赖更强：$font-size-base、$border-radius 等基础变量在 functions 里就被读取用于计算（比如 rem() 函数），一旦 functions 加载完成，再改 $font-size-base 就晚了。
-
$primary: #dc2626;必须写在@import "bootstrap/scss/functions"的上一行，不能之后 - 用
!default更安全，但仅限你自己的变量文件开头；直接赋值（无!default）也行，前提是位置绝对靠前 - 如果用了 Webpack 的
sass-loader配置additionalData注入变量，要确认它没和你手动写的@import冲突——重复注入会导致编译报错或覆盖混乱
新增主题色后 .text-navy 不出现？检查 theme-colors() 是否执行
升级后 theme-colors() mixin 的调用路径更明确：它现在只在 bootstrap/scss/utilities/api 中定义，且默认不随 bootstrap 全量导入自动触发。
- 必须显式
@import "bootstrap/scss/utilities/api";或至少@import "bootstrap/scss/utilities";，否则@include theme-colors();报错 “mixin not found” -
$theme-colors: map-merge($theme-colors, ("navy": #0f766e));这行要放在@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/utilities/api"之前 - DevTools 里搜不到
.text-navy？大概率是@include theme-colors();被漏掉，或者它写在了 utilities 导入之前
断点变量 $grid-breakpoints 改了但 col-2xl-4 不生效
升级后 Bootstrap 对断点键名校验更严格：新增的 "2xl" 键必须同步出现在 $grid-breakpoints 和 $container-max-widths 中，且组件专属断点（如 $navbar-breakpoint）不再自动跟随 lg，得手动指定。
立即学习“前端免费学习笔记（深入）”；
-
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px, 2xl: 1600px);—— 键名必须全小写、无空格、带引号 -
$container-max-widths必须完全镜像，包括顺序和键名：(... xxl: 1320px, 2xl: 1520px)，漏掉2xl就不会生成.container-2xl -
$navbar-breakpoint: 2xl;或$navbar-breakpoint: 1600px;必须显式声明，否则 navbar 仍按旧lg断点折叠
最常被忽略的一点：升级后 bootstrap/scss/bootstrap 不再隐式包含 utilities 全量模块，theme-colors()、breakpoint() 等关键逻辑都移进了 api 子模块。不手动导入，就等于没接入新能力。
