必须在导入 Bootstrap Sass 模块前重定义 $primary 变量，正确顺序为：先赋值 $primary，再依次 @import functions、variables 和 bootstrap；否则变量锁定无效，且需确保使用源码而非已编译 CSS。
改 $primary 这类变量能真正换主题色，但必须在 Bootstrap 的 Sass 模块加载前完成赋值——否则编译时读到的还是默认值。
自定义变量必须写在 @import "bootstrap/scss/functions" 之前
Bootstrap 的 Sass 编译依赖变量声明顺序。一旦 functions 或 variables 被引入，所有带 !default 的变量就已锁定，后续重赋值无效。
- ✅ 正确顺序（你的
custom.scss）：$primary: #2563eb;@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/bootstrap"; - ❌ 错误写法：
@import "bootstrap/scss/variables";后再写$primary: ...→ 完全不生效 - 别把变量塞进
bootstrap/scss/_variables.scss里——yarn upgrade一跑就丢 - 如果用了
@import "bootstrap/scss/bootstrap";一键导入，就别指望后置覆盖；它内部已按固定顺序加载全部依赖
新增主题色（如 custom-blue）要手动触发类生成
只往 $theme-colors 里加新 key 不够，Bootstrap 默认只对内置 key（primary、success 等）输出 .bg-custom-blue、.text-custom-blue 这类工具类。
- 必须显式调用
@include theme-colors();，它在bootstrap/scss/utilities/_api.scss中定义 - 确保已导入
utilities/api或完整utilities模块，否则@include会报错“mixin not found” - 重写
$theme-colors时，要保留所有需要的 key，比如：$theme-colors: ("primary": $primary, "custom-blue": #0f766e);
漏掉"danger"就真没了 - 检查浏览器 DevTools：如果新类没出现在 CSS 中，大概率是
theme-colors()没执行，或utilities模块根本没被引入
编译失败或样式没变？先确认你用的是 Sass 源码，不是 bootstrap.min.css
用 CDN 或 dist/css/bootstrap.min.css 加载 Bootstrap，任何 Sass 变量修改都毫无意义——它们压根没进编译流程。
立即学习“前端免费学习笔记（深入）”；
- 路径必须指向
node_modules/bootstrap/scss/，不是dist/目录 - Webpack/Vite 用户注意
sass-loader配置：
需设additionalData或prependData注入变量？小心重复注入导致冲突
推荐显式@import "~bootstrap/scss/bootstrap";，并确认~解析正确（Dart Sass 下更稳） - CLI 编译报
File to import not found？加--load-path=node_modules/bootstrap/scss - 改了
$primary但按钮还是蓝的？打开开发者工具，查.btn-primary的background-color值来源——是不是加载了两份 CSS，后一份覆盖了你的？
最易忽略的一点：$primary 不只影响按钮，它还推导出 $primary-rgb、$primary-bg-subtle 等衍生变量；如果你只改了 $primary 却忘了 $primary-rgb，某些 rgba() 调用会崩掉——别跳过验证。
