必须重定义Sass变量并重新编译，否则直接CSS覆盖会导致.alert-primary、.bg-primary等样式脱节，深色模式失效，且无法同步box-shadow等依赖--bs-primary-rgb的属性。
直接改编译后CSS会导致样式脱节和维护失控
你改了.btn-primary { background-color: #e74c3c !important; }，按钮是红了，但.alert-primary、.form-check-input:checked、.bg-primary还是蓝的——因为它们各自独立声明，没共享逻辑。更糟的是，box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .5)这种写法根本不会变色，它读的是 CSS 变量，不是你硬盖的 class。
常见错误现象：上线后发现“主题色只在按钮上生效”，其他组件颜色不一致；换深色模式时，手动覆盖的 CSS 没响应 data-bs-theme 切换；后续升级 Bootstrap，所有 !important 规则都得重查一遍是否还匹配新结构。
- 所有工具类（
bg-primary、text-success）和组件样式（btn、card）都由同一套 Sass 变量生成，改变量 = 一次生效，全链路同步 - 硬覆盖要对抗选择器权重，
!important用多了会引发层叠冲突，调试时 Chrome DevTools 显示“已取消”却不知被哪条规则干掉 - Bootstrap 的 JS 组件（如 Tooltip、Toast）初始化时可能读取 CSS 变量值做计算，直接改 class 不影响其内部逻辑，但变量改了，JS 行为可能随之变化（比如阴影尺寸、动画颜色）
SCSS变量能控制编译期行为，CSS变量做不到
--bs-primary 这类 CSS 变量只能影响已存在的、显式使用 var(--bs-primary) 的属性；它不会让 Sass 编译器多生成一个 .bg-indigo 类，也不会改变 $grid-breakpoints 断点阈值，更不会禁用未用模块（如 $enable-tooltip: false）。
真正需要定制的点，比如把容器最大宽度从 xl: 1140px 改成 1200px，或删掉所有表单验证图标、关闭 offcanvas 动画，这些都必须靠 Sass 变量开关驱动编译流程。
-
$container-max-widths和$grid-breakpoints必须同时重定义，否则断点类（.container-xl）和实际宽度不匹配 -
$enable-form-validation-icons: false能彻底移除相关 CSS 输出，体积直降 2–3KB；而 CSS 变量对这部分完全无感 - 新增配色（如
indigo）必须通过map-merge($theme-colors, ("indigo": #4b0082))，否则bg-indigo根本不会出现在最终 CSS 里
SCSS重载有明确顺序约束，错一步就白干
不是随便在 SCSS 文件里写 $primary: #6f42c1; 就能生效。Bootstrap 5 的变量依赖链非常严格，顺序错了，变量就被默认值覆盖，或者编译报错说 Undefined variable "$grid-columns"。
- 必须先
@import "bootstrap/scss/functions";→ 再@import "bootstrap/scss/variables";→ 然后才能重定义变量（如$primary、$enable-modal） - 重定义变量必须写在这两个
@import之间，写在后面等于没写；写在functions前面，color-contrast()等函数还没加载，Sass 直接报错 - 如果用了
@use（Bootstrap 5.3+ 推荐），得用@use "bootstrap/scss/functions" with ($primary: #6f42c1);，不能混用@import和@use
CDN用户没法用SCSS，但仍有折中方案
如果你只引入了 CDN 上的 bootstrap.min.css，确实没法改 Sass 变量。这时别硬写一堆 !important，优先考虑：
- 用
:root覆盖 CSS 变量（--bs-primary、--bs-primary-rgb必须一起改），适用于微调主色、圆角、字号等全局属性 - 对关键区域加 wrapper 元素并设
max-width，绕过.container的响应式限制，比媒体查询 +!important更可控 - 放弃全站换肤，只在特定页面或组件内用
class="brand-section"隔离变量作用域，避免污染全局
最常被忽略的一点：哪怕只改一个颜色，也得查清它是否被用于 rgba(var(--bs-primary-rgb), .5)、color-contrast() 或 border-color —— 漏掉 --bs-primary-rgb 或 $primary-rgb，就会出现“按钮变色了，但边框和阴影还是旧的”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
