必须在@import "bootstrap/scss/variables"前重定义变量，否则静默失效；正确顺序为：先@import functions，再自定义变量（如$primary: #4f46e5），然后@import variables，最后map-merge扩展$theme-colors并显式调用@include theme-colors()。
必须在 @import "bootstrap/scss/variables" 之前重定义变量，否则所有覆写都静默失效——Sass 变量只认第一次赋值。
变量重定义必须放在 functions 之后、variables 之前
很多人把 $primary: #dc2626 写在 @import "bootstrap/scss/bootstrap" 后面，或者直接塞进 HTML 的 <style> 里，结果完全没反应。根本原因是 Bootstrap 的 _variables.scss 里所有变量都带 !default，但你得抢在它被加载前赋值才有效。
正确顺序只能是：
-
@import "bootstrap/scss/functions"（必需，提供color-contrast()等函数） - 你的自定义变量块（如
$primary: #4f46e5、$body-bg: #f9fafb） -
@import "bootstrap/scss/variables"（这时你的值才会覆盖默认值） - 后续导入
mixins、root、bootstrap等
漏掉 functions 会导致编译报错 Undefined variable: "$font-size-base"；顺序颠倒会让 $primary-rgb 这类派生变量仍用默认值，按钮背景变了但文字色还是黑的。
立即学习“前端免费学习笔记（深入）”；
新增主题色不能直接覆盖 $theme-colors，要用 map-merge()
写 $theme-colors: ("navy": #0f766e) 看似简单，实际会清空 primary、success 等所有内置键，导致 .btn-secondary 样式丢失、.alert-success 彻底不渲染。
安全做法是增量合并：
$navy: #0f766e;
$theme-colors: map-merge($theme-colors, ("navy": $navy));
@include theme-colors();
注意三点：
-
"navy"必须加引号，navy（无引号）会编译失败 -
@include theme-colors()必须放在所有@import之后，且确保已导入bootstrap/scss/utilities或至少bootstrap/scss/utilities/api - 新增色名会自动产出
.btn-navy、.text-navy等工具类，无需手写
字体、圆角、阴影等非颜色变量也要按依赖链覆写
$font-size-base 改了，但 .h1 字体没变？因为 .h1 用的是绝对值 2.5rem，不参与缩放；而 .alert 用的 $font-size-sm 是基于 $font-size-base * .875 计算的——所以只改 $font-size-base，.alert 会变，.h1 不会。
常见非颜色变量的处理方式：
-
$border-radius：影响所有圆角，但$border-radius-lg、$border-radius-sm是独立变量，需单独覆写 -
$box-shadow-sm：修改后仅影响带-sm后缀的阴影类，.card默认用的是$box-shadow，不是sm -
$enable-shadows：设为false才能彻底关掉所有阴影类，单改$box-shadow值无效
构建入口必须是你自己的 SCSS 文件，不能直接引用 bootstrap.min.css
如果你的 HTML 里是 <link href="bootstrap.min.css">，那在 SCSS 里怎么改 $primary 都没用——CSS 文件已经编译完了，变量早没了。
真正起作用的前提是：
- 项目里有自定义入口文件（如
app.scss或custom.scss） - 构建工具（Vite/Webpack）配置了 Sass 加载器，并能解析
node_modules路径（例如 Webpack 下用@import "~bootstrap/scss/bootstrap"） - Vite 用户注意：推荐用
@import写法而非@use，避免嵌套语法兼容问题 - Webpack 用户检查
sass-loader版本 ≥ 12，旧版对!default处理有 bug
最易忽略的一点：@include theme-colors() 和 @include utilities() 这类关键 mixin 必须显式调用，它们不会随 @import "bootstrap" 自动执行——尤其是你按需导入组件时，漏掉这句，新加的颜色类根本不会生成。
