只改--bs-primary按钮悬停仍为蓝色，因bootstrap 5.3+的.btn-primary:hover依赖--bs-primary-rgb等6个配套变量协同计算，漏一即回退默认值；所有变量须在:root中完整声明且加载顺序必须在bootstrap css之后。
仅改 --bs-primary 无法让按钮悬停、边框、文字强调色同步变色，必须一次性补全整套配套变量，且作用域和加载顺序稍有偏差就会失效。
为什么只改 --bs-primary 按钮悬停还是蓝色？
Bootstrap 5.3+ 的 .btn-primary:hover 不读取 --bs-primary，而是用 rgba(var(--bs-primary-rgb), .1) 计算背景；.card-title 依赖 --bs-primary-text-emphasis 控制可读性；.border-primary 实际读的是 --bs-primary-border-subtle。漏掉任意一个，对应样式就 fallback 到默认蓝色。
-
--bs-primary-rgb必须是纯数字三元组（如74, 111, 165），不能带括号、空格或单位，否则rgba()解析失败 -
--bs-primary-text-emphasis决定浅底上文字是否够黑，高饱和主色（如亮橙）不设它会导致标题对比度不足 - 所有变量必须在
:root中声明，写在.my-app或组件 scoped style 里，组件读不到
--bs-primary 变量能影响哪些组件？哪些不能？
能响应的组件： .btn-primary、.alert-primary、.form-control:focus、.tooltip（需同时设 --bs-tooltip-bg）、.link-primary。
-
.text-primary和.bg-primary仍是编译时生成的 class，不读变量，改了也无效 - 伪元素
::before/::after的content属性不能用var(--bs-primary)，会原样输出字符串 -
@media查询条件不支持prefers-color-scheme: var(--bs-dark-mode)这类写法，语法非法 - 第三方图标库（如 Bootstrap Icons）和部分表单插件完全不读这些变量
深色模式下如何保持一致？
CSS 变量不会自动反转，[data-bs-theme="dark"] 下必须单独重写整套变量链，否则按钮变暗但 Tooltip 背景仍亮、边框发灰。
- 不要只覆盖
--bs-primary，必须同步定义--bs-primary-rgb、--bs-primary-text-emphasis等全部配套项 - 如果用了
prefers-color-scheme自动切换，得用 JS 注入两套变量，并监听系统主题变化 - 已初始化的 Tooltip、Popover 实例不会自动重绘，需手动调用
dispose()+ 重建
自定义 CSS 必须加载在 Bootstrap 官方 CSS 之后
如果 <link rel="stylesheet"> 顺序反了，或者构建工具把你的 CSS 打包到 Bootstrap 前面，变量声明会被忽略——浏览器按顺序解析，后声明的变量才能覆盖前值。
- 检查 DevTools 的 Computed 面板，确认
--bs-primary确实来自你的样式表，而不是 Bootstrap 默认值 - 避免用
!important强行覆盖变量，它对 CSS 自定义属性无效 - 若项目混用 Sass 编译和 CSS 变量，注意
--bs-primary不会影响$primary相关的 Sass 函数（如lighten($primary, 10%)），两者运行时隔离
真正容易被忽略的不是“怎么写”，而是“写在哪”和“写几遍”：一套变量链漏一个，某个角落的边框或徽章文字就会突然掉回默认蓝；深色模式少一组，夜间界面就出现违和的亮色块。变量定制看着轻量，实则比 Sass 编译更依赖完整性和一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
