直接改:root里的--bs-*变量即可生效，但必须在Bootstrap CSS之后加载，否则被覆盖；变量名需精确匹配（如--bs-primary）、不可加!important、须有空格和分号。
直接改 :root 里的 --bs-* 变量就能生效，但必须确保它在 Bootstrap CSS 之后加载，否则白写。
为什么改了 :root 没反应？
常见现象是开发者工具里看到变量值还是默认的 #0d6efd，或者整行被灰掉标为 “invalid property value”。根本原因就两条：
- 你的
:root块写在了 Bootstrap CSS 之前 —— 浏览器按顺序解析，后加载的 CSS 会覆盖前面同名变量 - 变量名拼错，比如用了
--primary而不是 Bootstrap 5.3+ 正确的--bs-primary，或漏了空格、分号 - 写了
!important，比如--bs-primary: red !important—— CSS 变量不支持!important，这行直接被浏览器忽略
怎么安全地覆盖 --bs-tooltip-bg 这类组件变量？
Tooltip 是最常被定制的组件之一，它的配色由三个变量控制，只改这三个就能干净统一：
-
--bs-tooltip-bg：气泡背景色 -
--bs-tooltip-color：文字颜色 -
--bs-tooltip-arrow-color：箭头颜色（别漏！否则箭头还是默认蓝，和新背景割裂）
必须把它们声明在能影响 .tooltip 和 .tooltip-inner 的作用域里。推荐写法：
立即学习“前端免费学习笔记（深入）”；
:root {
--bs-tooltip-bg: #343a40;
--bs-tooltip-color: #f8f9fa;
--bs-tooltip-arrow-color: #343a40;
}
放在自己的 <style> 块末尾，或自定义 CSS 文件最底部，确保加载顺序压过 Bootstrap。
用 Sass 重定义 $primary 为什么有时按钮没变色？
因为 .btn-primary 不是直接读 $primary，而是从 $theme-colors map 里取值，并经过 color-contrast() 算出文字色。所以光改 $primary 不够：
- 必须在
@import "bootstrap/scss/variables"之前 就赋值，不能加!default - 如果还扩展了
$theme-colors（比如加了"brand": #2c3e50），就得同步更新整个 map，否则.bg-brand根本不会生成 - 按钮 hover 色由
shade-color($primary, 15%)算出，若觉得太深，得一并调$primary-hover或改底层函数参数
CDN 引入时还能用变量覆盖吗？
能，但仅限 :root 方式；Sass 变量方案完全失效。因为 CDN 提供的是编译好的 CSS，$primary 已经转成固定值写死在 --bs-primary 里了。这时候你唯一可控的就是运行时覆盖这些 CSS 变量：
- HTML 中确保
<link href="bootstrap.min.css">在前，<style>:root{...}</style>或<link href="custom.css">在后 - 不要指望靠 JS 动态改
document.documentElement.style.setProperty()来换主题——虽然技术上可行，但所有已渲染的 tooltip、popover 都不会自动响应，得手动触发重绘 - 如果项目需要多主题切换，CDN +
:root覆盖只是临时解法；真要稳定，得切到 Sass 构建链，让变量在编译期就介入
最易被忽略的一点：CSS 变量是继承的，但组件内部可能用 var(--bs-tooltip-bg, var(--bs-body-bg)) 这种降级写法。一旦你漏掉某个变量（比如没设 --bs-body-bg），降级逻辑就会悄悄把你想要的主题色吃掉。
