应通过 sass 变量重载定制 bootstrap，而非直接修改 css 文件；因手动覆盖无法同步更新组件样式、css 变量及深色模式响应，且需满足加载顺序与选择器权重等硬性条件才能生效。
直接改 bootstrap.min.css 或 bootstrap.css 文件，短期看似快，但很快就会卡在升级、维护和深色模式适配上——这不是“能不能覆盖”的问题，而是“覆盖后哪部分还生效”的问题。
修改源码 CSS 会导致组件样式脱节
Bootstrap 的工具类（如 .alert-primary、.bg-primary、.form-check-input:checked）和组件（如 .btn、.card）不是靠一套颜色值硬编码出来的，而是由同一组 Sass 变量生成。你只改了 .btn-primary { background-color: #e74c3c !important; }，其他地方根本不会变：
-
.alert-primary还是默认蓝，因为它自己声明了background-color -
box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .5)完全不受影响，它读的是 CSS 变量，不是你覆盖的 class - 深色模式下，
data-bs-theme="dark"切换时，手动覆盖的样式不会响应，因为没参与变量链
Overriding 必须满足两个硬条件才真正生效
光写 .my-btn { color: red; } 没用，浏览器根本不会选它。真正起效的前提是：
- 确保自定义 CSS 在 HTML 中
<link>标签里排在 Bootstrap 之后（检查 Network 面板确认加载顺序和状态码 200） - 选择器权重至少达到
0,0,2,0：比如用.btn.my-submit或button[type="submit"].btn，而不是单类.my-btn - 避免依赖
!important—— 它会掩盖真实优先级问题，升级后容易和 Bootstrap 新增的!important冲突
SCSS 变量重载才是真正的定制起点
如果你要改主色、断点、容器宽度或删功能模块（比如关掉表单验证图标），必须走 Sass 编译流程：
- 重定义
$primary前，得先@import "bootstrap/scss/functions";，否则变量未声明 - 改
$container-max-widths必须同步改$grid-breakpoints，否则.container-xl和实际宽度对不上 - 新增配色如
indigo要用map-merge($theme-colors, ("indigo": #4b0082))，否则.bg-indigo根本不会生成 -
$enable-form-validation-icons: false能直接从输出 CSS 中剔除对应规则，比 CSS 覆盖更干净
最常被忽略的一点：Sass 变量重载顺序错一丁点，比如把 $primary 定义放在 @import "bootstrap/scss/variables" 之后，就等于没写——编译器早用默认值初始化完了，后面赋值无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
