必须在导入 Bootstrap 的 scss 文件前定义自定义变量，如 $primary: #6f42c1;，否则无效；所有需覆盖的变量（如 $body-bg）须置于任何 @import "bootstrap/scss/..." 之前，且仅带 !default 的变量可安全覆盖。
如何在 Bootstrap 5 项目中覆盖默认 Sass 变量
必须在导入 Bootstrap 的 scss 文件前，先定义你的自定义变量。Bootstrap 5 的变量设计为“可覆盖优先”，但前提是顺序不能错——后定义的变量不会覆盖已编译的部分。
- 在自建的
_custom.scss或主入口main.scss中，第一行就用$primary: #6f42c1;这类赋值，不要等@import "bootstrap/scss/functions";之后再改 - 所有要覆盖的变量（如
$body-bg、$font-size-base）必须出现在任何@import "bootstrap/scss/..."语句之前 - 如果用了
!default声明的变量（比如 Bootstrap 源码里的$enable-rounded: true !default;），你直接赋值就能生效；但没加!default的变量（如某些内部计算用的$_spacer）不能被安全覆盖，强行改可能破坏依赖逻辑
为什么改了变量但样式没变
常见原因是变量被重复定义或导入顺序混乱，导致你的修改根本没进编译流程。
- 检查是否误把自定义变量写在
@import "bootstrap/scss/bootstrap";后面——这等于在 CSS 已生成后再“改草稿”，无效 - 确认没有在多个地方 import Bootstrap（比如同时在
main.scss和某个组件里 import），后者会重置变量作用域 - 如果你用的是 Bootstrap 官方 npm 包，路径必须是
bootstrap/scss/...，写成node_modules/bootstrap/scss/...可能绕过 webpack 的 resolve 配置，导致加载了旧版或空文件 - 运行
npm run build后清掉缓存（比如.sass-cache目录或 webpack 的cache: true），否则旧编译结果可能被复用
哪些变量可以安全修改，哪些要小心
Bootstrap 5 把变量分成了三类：主题色与间距类（安全）、函数与 mixin 内部用（不建议动）、CSS 自定义属性（--bs-*）类（需同步更新 JS）。
- 放心改：
$primary、$grid-breakpoints、$spacers、$border-radius—— 这些都有!default，且被广泛引用 - 谨慎改：
$font-family-sans-serif要注意字体栈兼容性；$enable-shadows关闭后，所有shadow-工具类会失效，但部分组件（如dropdown）JS 仍可能内联 style，造成不一致 - 别直接改：
$_rfs-breakpoint、$_component-active-bg这类带下划线前缀的，属于内部实现细节，文档不承诺稳定性
使用 CSS 自定义属性时，Sass 变量还起作用吗
起作用，但只影响 Sass 编译阶段；CSS 变量（--bs-primary）是运行时生效的另一套机制，两者不自动同步。
- Bootstrap 5 默认开启
$enable-css-vars: true;，它会把 Sass 变量映射为 :root 下的 CSS 变量，例如$primary→--bs-primary - 如果你关掉了
$enable-css-vars，那 CSS 变量将完全不生成，但 Sass 变量照常参与编译，不影响 class 输出 - 想动态换肤？不能只靠改 Sass 变量——得在运行时操作
document.documentElement.style.setProperty('--bs-primary', '#...')，Sass 层无法响应 DOM 变化
