必须先声明$primary等变量再依次导入functions、variables和bootstrap，否则因!default机制失效；漏functions会报错，用CDN或dist CSS则变量修改完全无效。
变量必须在@import "bootstrap/scss/functions"之前声明
改了$primary却没变色？大概率是顺序错了。Bootstrap 的 Sass 变量带 !default，只在首次声明时生效；一旦 bootstrap/scss/variables 被加载，后续赋值就静默失效。
错误写法示例：
@import "bootstrap/scss/variables"; $primary: #dc2626; // ❌ 无效
正确顺序必须是：
- 先声明你要覆盖的变量（如
$primary、$font-size-base），推荐加!default更安全 - 再依次
@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→@import "bootstrap/scss/bootstrap" - 漏掉
functions会导致编译报错Undefined variable: "$font-size-base" - 构建入口必须是你自己的
custom.scss，不能直接引用bootstrap.min.css
新增主题色必须用map-merge()且显式调用@include theme-colors()
想加个 navy 色但 .text-navy 在 DevTools 里查不到？说明 theme-colors() 没执行，或 utilities 根本没引入。
立即学习“前端免费学习笔记（深入）”；
错误做法：
$theme-colors: ("navy": #0f766e); // ❌ 清空所有内置色，.btn-secondary 失效
正确做法：
- 用
map-merge()增量扩展：$theme-colors: map-merge($theme-colors, ("navy": #0f766e)); - 键名必须是字符串：
"navy"✅，navy❌（Sass 编译失败） -
@include theme-colors()必须放在所有@import之后，且已导入bootstrap/scss/utilities或至少bootstrap/scss/utilities/api - 否则不会生成
.bg-navy、.border-navy等工具类
哪些变量能改，哪些改了也白改
$primary、$font-size-base、$border-radius 这类语义变量可安全覆盖；但以下情况改了也没用：
- 在
:root里重写--bs-primary：这只是编译时生成的“快照”，不影响lighten($primary, 10%)这类 Sass 函数产出的样式 - 用 JS 动态改
document.documentElement.style.setProperty('--bs-primary', 'red')：只影响直接读取该 CSS 变量的地方，大量组件样式早已固化 - 把变量塞进
node_modules/bootstrap/scss/_variables.scss：下次yarn upgrade就丢 - 只改
$font-size-base但.h1没变：因为.h1用的是绝对值2.5rem，不是基于变量计算的
CDN 或 bootstrap.min.css 下无法通过 Sass 变量定制
用 CDN 加载 bootstrap.min.css 或直接 link dist 目录下的 CSS 文件，意味着 Sass 变量早已被编译成固定值。你在 SCSS 里改的任何变量，对它们完全无效。
关键确认点：
- 路径必须指向
node_modules/bootstrap/scss/，不是dist/目录 - HTML 中
<link>加载的必须是你自己构建出的 CSS 文件（比如custom.css） - 如果你用 Webpack/Vite，慎用
additionalData注入变量——它可能和你手写的变量声明冲突
真正起作用的永远是你的 custom.scss 编译过程，而不是运行时的任何覆盖或注入。
