必须在@import "bootstrap/scss/functions"之前声明$primary，否则被静默忽略；新增主题色需用map-merge()增量合并并显式调用@include theme-colors()，且须手动定义$primary-rgb等衍生变量。
改了$primary却还是蓝色？不是代码写错了，而是变量根本没进编译流程——你大概率在@import "bootstrap/scss/variables"之后才赋值，或者压根没走 Sass 编译。
必须在@import "bootstrap/scss/functions"之前声明变量
Bootstrap 5 的 Sass 变量（如$primary、$font-size-base）全部带!default，只在首次声明时生效。一旦functions被加载，所有基础函数和默认变量就锁死了。
-
$primary: #2563eb;必须出现在任何@import语句之前 - 写在
@import "bootstrap/scss/functions"之后 → 静默忽略 - 写在
@import "bootstrap/scss/bootstrap"之后 → 完全无效 - 大小写敏感：
$Primary或$primary-color不会匹配，Sass 直接回退默认值
新增主题色必须用map-merge()且显式调用@include theme-colors()
直接覆盖$theme-colors会清空所有内置颜色键，导致.btn-secondary、.text-success等类彻底消失。
- 正确增量添加：
$navy: #0f766e;→$theme-colors: map-merge($theme-colors, ("navy": $navy)); - 键名必须是字符串：
"navy"✅，navy❌（编译报错） -
@include theme-colors();必须放在所有@import之后、文件末尾 - 确保已
@import "bootstrap/scss/utilities";（不是仅utilities/api），否则 mixin 找不到
编译不生效？先确认三件事
90% 的“改了没变”问题都卡在这三个环节，而不是变量写法本身。
- 项目实际加载的是
bootstrap.min.css（CDN 或dist/css下）→ Sass 变量修改毫无意义 - 构建入口不是你的
custom.scss，而是直接引用了预编译 CSS - Webpack/Vite 配置了
additionalData自动注入变量 → 和你手写的$primary冲突，优先级混乱 - 用了废弃的 Node Sass → 必须用 Dart Sass（运行
npx sass --version确认）
$primary-rgb这类衍生变量不会自动生成
Bootstrap 很多样式（比如深色模式适配、透明叠加）依赖$primary-rgb这种 RGB 元组变量，它们不会因为你改了$primary就自动更新。
- 必须手动定义：
$primary-rgb: 37, 99, 235; - 如果新增
navy，也得同步加$navy-rgb: 15, 118, 110; - 漏掉这个，
rgba(var(--bs-navy-rgb), .5)这类 CSS 变量就会 fallback 到默认值 - 注意：CSS 变量（如
--bs-primary）只是编译快照，不影响lighten($primary, 10%)这类 Sass 函数结果
真正起效的前提只有一个：你修改的是参与构建的 Sass 源文件，且顺序、路径、导入完整性全部对齐。任何环节断链，都会让变量变成注释一样的存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
