直接修改$primary可换主题色，但必须在@import "bootstrap/scss/variables"前重定义，且需经Sass编译；新增主题色须用map-merge()增量添加并显式调用@include theme-colors()，否则不生效。
直接改 $primary 就能换主题色，但必须走 Sass 编译流程，且变量声明位置错一步就完全失效。
变量必须在 @import "bootstrap/scss/variables" 之前重定义
Bootstrap 的变量带 !default，只在首次声明时生效。一旦 _variables.scss 被加载，后续赋值全部被忽略。
-
$primary: #2563eb;必须写在@import "bootstrap/scss/functions"之后、@import "bootstrap/scss/variables"之前 - 错误顺序：
@import "bootstrap/scss/bootstrap";再写$primary→ 零效果 - 别把变量塞进
node_modules/bootstrap/scss/_variables.scss里 →yarn upgrade一跑就丢 - 大小写敏感：
$Primary、$primary-color都不匹配，Sass 静默回退默认值
新增主题色要靠 map-merge()，不能直接赋值 $theme-colors
直接 $theme-colors: ("navy": #0f766e); 会清空 secondary、success 等所有默认键，导致 .btn-secondary 消失。
- 正确做法：先
@import "bootstrap/scss/functions";，再用map-merge()增量添加 -
$navy: #0f766e;和$theme-colors: map-merge($theme-colors, ("navy": $navy));都得放在@import "bootstrap/scss/variables"之前 - 键名必须是字符串：
"navy"✅，navy❌，"deep-navy"✅，"deep navy"❌（空格编译失败）
@include theme-colors() 必须显式调用，否则新类不生成
Bootstrap 不会自动为 $theme-colors 里的新 key 输出 .text-navy、.bg-navy 这类工具类，必须手动触发。
立即学习“前端免费学习笔记（深入）”；
- 确保已
@import "bootstrap/scss/utilities";（不是只导入utilities/api） -
@include theme-colors();要写在所有@import之后、文件末尾 - 如果没看到新类出现在浏览器 DevTools 的 CSS 中，大概率是这行漏了，或
utilities根本没引入 - 想让
.btn-outline-navy正常工作？还得补$navy-rgb: 15, 118, 110;，否则边框和文字色不会按对比度自动适配
最容易被忽略的不是怎么写，而是构建流程本身——你改的 $primary 如果没进 Dart Sass 编译器，它就只是注释；HTML 里 <link> 指向的是 dist/css/bootstrap.min.css，那所有变量修改都等于白写。
