变量必须在@import "bootstrap/scss/functions"之前声明，否则因!default机制失效；正确顺序为：先声明$primary等变量，再依次导入functions、variables及后续模块，并同步更新$theme-colors、$primary-rgb等衍生变量。
变量必须在 @import "bootstrap/scss/functions" 之前声明
Bootstrap 的 Sass 变量（如 $primary、$grid-columns）带 !default，只在首次定义时生效。一旦 _functions.scss 或 _variables.scss 被加载，后续赋值就完全无效。
常见错误是把变量写在 @import "bootstrap/scss/bootstrap" 后面，或者写在 CSS 文件里——浏览器根本不会解析 $primary: red; 这种语句。
- 正确顺序：先声明变量 →
@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→ 其余模块 - 推荐建一个干净的入口文件（比如
custom.scss），只放变量和@import，不混业务样式 - 变量名严格大小写敏感：
$Primary、$primary-color都不会被识别，Sass 静默回退到默认值
$theme-colors 和单个变量要同步更新
$primary 是基础值，但 .text-primary、.bg-success 等工具类实际读取的是 $theme-colors 这个 map。默认它包含 ("primary": $primary)，但如果你重写了整个 $theme-colors，就必须显式保留所有键，否则 secondary、danger 全部消失。
- 只改
$primary：够用，前提是没动过$theme-colors（它会自动引用新值） - 想加新色（如
navy）：$navy: #0f766e;+$theme-colors: map-merge($theme-colors, ("navy": $navy)); - 直接赋值
$theme-colors: ("primary": #2563eb, "navy": #0f766e);→ 丢掉所有默认色，.btn-secondary将失效 - 新增颜色后，必须调用
@include theme-colors();，否则不会生成.text-navy等类
衍生变量别漏：尤其是 $primary-rgb 和深色模式相关值
Bootstrap 很多地方不是直接用 $primary，而是用 $primary-rgb（用于 rgba()）、$primary-text-emphasis（深色背景上的文字对比度）、$primary-hover（按钮悬停色）等。这些不会自动生成，必须手动同步。
-
$primary-rgb: to-rgb($primary);—— 必须写，否则.alert-primary的边框色可能错乱 -
$primary-text-emphasis: color-contrast($primary);—— 影响深色模式下.text-primary的可读性 - 按钮 hover 色不对？优先查
$primary-hover，而不是硬写.btn-primary:hover { background: ... } - Bootstrap 5.3+ 新增了
$primary-bg-subtle等变量，旧写法可能被忽略
编译没生效？先盯住这三件事
“改了但还是蓝色”几乎都卡在这几个环节：
- 项目实际加载的是
bootstrap.min.css（CDN 或dist/css下），根本没走 Sass 编译流程 → 检查 HTML 中<link>是否指向你构建出的 CSS，且构建入口是你自己的custom.scss - Webpack/Vite 配置了
additionalData或prependData自动注入变量 → 它可能把你手写的$primary覆盖或冲突了 - 用了 Node Sass → 已废弃，不支持 Bootstrap 5.3+ 的新函数；运行
npx sass --version确保是 Dart Sass（2026 年起强制要求）
最常被忽略的是：改了 $grid-breakpoints 却忘了同步 $container-max-widths 和 $navbar-breakpoint，结果断点变了但容器宽度卡死、导航栏折叠时机错乱——这些变量彼此解耦，必须手动对齐。
