必须将自定义变量文件（含!default声明）置于所有Bootstrap @import之前，否则$primary重定义无效；.btn-primary依赖$primary而非$blue，改$blue不影响按钮；需确认使用Sass源码编译而非CDN预编译包。
改了 _variables.scss 里的 $primary 却没看到 .btn-primary 变色？大概率不是编译失败，而是变量根本没生效——Sass 变量一旦被初始化就不可覆盖，顺序错一丁点，等于白改。
自定义变量必须放在所有 Bootstrap @import 之前
这是最常踩的坑。Sass 的 $primary: #ff6b35 如果写在 @import "bootstrap/scss/variables" 后面，编译器早已用默认值初始化完毕，后续赋值直接被忽略。
- ✅ 正确顺序：
@import "custom-variables";→@import "bootstrap/scss/functions";→@import "bootstrap/scss/variables"; - ❌ 错误写法：
@import "bootstrap/scss/variables";→ 再写$primary: #ff6b35; -
custom-variables.scss中每个变量都得带!default，否则无法被“重载”：例如$primary: #ff6b35 !default; - 漏掉
functions会导致$font-size-base等依赖变量未定义，编译直接报错
$primary 改了但 .btn-primary 没变？检查你动的是不是语义色
Bootstrap 5 把语义色和基础色分开了：.btn-primary 读的是 $primary，不是 $blue。改 $blue 不会影响按钮，只影响 .text-blue、.border-blue 这类工具类。
- 想换主题色，只改
$primary、$secondary就够了 - 同步改
$blue是多余操作，还可能意外影响警告框图标、部分边框等隐式依赖$blue的地方 - 别直接改
$theme-colorsmap，除非你要新增色系（如indigo），否则容易破坏内部映射逻辑
编译成功 ≠ CSS 文件更新
Webpack/Vite 等构建工具缓存了上一轮输出，或者 HTML 里引用的还是旧文件路径，都会导致你“明明改了却看不到效果”。
立即学习“前端免费学习笔记（深入）”；
- 删掉
dist或build目录再跑一次构建，强制清缓存 - 打开最终生成的 CSS 文件，搜索
.btn-primary或--bs-primary，确认值是否已更新——别信终端里那句 “Compiled successfully” - 检查 HTML 中的
<link>是否指向你新生成的 CSS，而不是 CDN 或旧版本本地文件 - 浏览器可能缓存了旧 CSS：用
Ctrl + F5（Win）或Cmd + Shift + R（Mac）硬刷新，或在 DevTools Network 面板勾选 “Disable cache”
最容易被忽略的一点：你改的是 _custom-variables.scss，但主入口 Sass 文件里压根没 @import "custom-variables";；或者编辑器保存失败、文件带 BOM 头，编译器读到的是空内容。验证前，先打开编译输出的 CSS 搜一把——这是唯一靠谱的判断依据。
