必须重编译Sass才能真正修改Bootstrap 5的$primary变量，因它是编译期Sass变量而非运行时CSS自定义属性；需同步更新$primary-rgb和$primary-text-emphasis，并在import Bootstrap前定义，否则组件状态和衍生色将失效。
Bootstrap 5 并不“更推荐”CSS 自定义属性（--bs-primary）替代 Sass 变量（$primary——它们根本不是同一层的东西，不能互相替代。
为什么改 --bs-primary 看似生效，但实际很脆弱
你在 :root 里写 --bs-primary: #dc3545，按钮背景确实变红了，但这只是因为 .btn-primary 的 background-color 恰好用了 var(--bs-primary)。可一旦遇到：
-
box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .5)—— 如果你没同步改--bs-primary-rgb，阴影还是默认蓝 -
.alert-primary用的是border-left-color: var(--bs-primary)，但它的color是硬编码的#084298（来自 Sass 编译时计算），不会响应 CSS 变量 - 深色模式下，
data-bs-theme="dark"会切换一组独立的--bs-*-dark变量，但你手动设的--bs-primary不在其中，切换后直接失效
为什么 $primary 不能运行时改，但必须提前重定义
$primary 是 Sass 编译期符号，输出到 CSS 后就彻底消失。你无法用 JS 读取或修改它，也不能靠浏览器 DevTools 查看。但它决定了：
- 所有工具类是否生成：
bg-primary、text-success、border-info全部由$theme-colorsmap 编译产出 - 组件样式逻辑：
$enable-gradients: false能让整个.btn类去掉渐变背景，CSS 变量做不到 - 断点计算：
$grid-breakpoints影响.col-md-6的媒体查询阈值，这不是变量替换，是条件编译
什么时候该用 CSS 变量，什么时候必须动 Sass
选哪个，取决于你要改什么：
- 想让主题色在用户点击按钮后实时切换？用
document.documentElement.style.setProperty('--bs-primary', '#8b5cf6')—— 这是唯一能运行时生效的方式 - 想删掉所有表单验证图标、把容器最大宽度从
1140px改成1200px、新增bg-indigo类？必须改$enable-form-validation-icons、$container-max-widths、map-merge($theme-colors, ("indigo": #4b0082)) - 想让 Tooltip 的阴影颜色随主题自动变化？得确认 JS 初始化时是否读取了
--bs-primary-rgb；如果它只读getComputedStyle(el).color，那 CSS 变量也救不了
真正容易被忽略的点：Bootstrap 5.3+ 中，--bs-primary 和 --bs-primary-rgb 是解耦的两个变量，前者用于纯色，后者专供 rgba()；你改一个，另一个不跟上，就会出现“按钮变色了，但焦点环和阴影没变”的断裂现象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
