不可行。Bootstrap 5+ 的 CSS 自定义属性是编译时生成的只读快照，:root 覆盖仅影响直接使用 var(--bs-xxx) 的样式，无法改变经 Sass 函数或逻辑生成的固化 CSS。
直接用 :root 覆盖 Bootstrap 的 CSS 自定义属性可行吗？
不行。Bootstrap 5+ 的 CSS 自定义属性（如 --bs-primary）是编译时从 Sass 变量生成的“只读快照”，不是运行时可动态修改的配置入口。你在 :root 里重写 --bs-primary，确实能影响部分直接使用该变量的组件样式（比如 background-color: var(--bs-primary)），但大量依赖 Sass 函数（如 lighten($primary, 10%)）或条件逻辑（if($enable-gradients, ..., ...)）生成的 CSS 并不会响应你的改动——它们早已在构建时固化了。
想真正覆盖默认 Sass 变量，必须改构建流程
核心原则：Sass 变量只在编译期生效，覆盖必须发生在 @import Bootstrap 源文件之前。你不能靠后加载的 CSS 或 JS 动态改它。
- 先创建自己的
_custom.scss，在顶部用$primary: #2563eb !default;等方式声明新值（!default确保不报错，且仅当原变量未定义时才生效） - 紧接着
@import "bootstrap/scss/functions";、@import "bootstrap/scss/variables";、@import "bootstrap/scss/mixins"; - 最后
@import "bootstrap/scss/bootstrap"; - 确保你的构建工具（Vite、Webpack、Dart Sass CLI）编译的是这个主入口文件，而不是直接引用
bootstrap/dist/css/bootstrap.min.css
常见错误：把自定义变量写在 @import bootstrap 之后——这时变量已被读取并计算完毕，再赋值无效。
!default 和直接赋值的区别很关键
Bootstrap 的 _variables.scss 中所有变量都带 !default，这是你覆盖的前提。但你要分清两种写法：
立即学习“前端免费学习笔记（深入）”；
-
$primary: #dc2626 !default;—— 安全，仅当之前没定义过$primary才生效；适合放在你自己的变量文件开头 -
$primary: #dc2626;（无!default）—— 强制覆盖，必须出现在 Bootstrap 的@import "variables"之前，否则会因重复定义报错 - 别碰
map-merge()类型的变量（如$theme-colors），要扩展得用$theme-colors: map-merge(...)，直接赋值会丢掉默认色
漏掉 !default 或顺序错，轻则覆盖失败，重则 Sass 编译直接中断。
不想动构建？用 CSS 自定义属性做有限样式微调
如果你只是想改按钮颜色、文字大小等局部表现，且项目已用 bootstrap.min.css（即跳过 Sass 编译），可以利用 Bootstrap 5+ 暴露的部分 CSS 变量做轻量覆盖：
:root {
--bs-primary: #7c3aed;
--bs-body-font-size: 0.875rem;
}
但这仅对以下情况有效：
- 组件内显式用了
var(--bs-xxx)（如.btn-primary { background-color: var(--bs-primary); }） - 没经过 Sass 颜色函数处理（比如
.btn-primary:hover的背景是硬编码的#6d28d9，不是darken(var(--bs-primary), 5%)） - 你愿意手动查源码确认哪些地方用了变量、哪些是静态值
实际项目中，这类“CSS 变量补丁”容易遗漏 hover/focus/disabled 状态，稳定性远不如 Sass 层覆盖。
