5.2 CSS 定制：不碰源码的覆盖术
文档摘要
5.2 CSS 定制：不碰源码的覆盖术 不编译源码也能定制：Bootstrap 5 把主题色、字体、圆角等关键值暴露成 CSS 自定义属性（ 这类变量），运行期改一处即可换装；更细的改动靠选择器覆盖完成。本节立三条规矩：改属性优于写覆盖、覆盖要算清优先级、作用域尽量小。 位置：定制章第二案，与 5.1 互为补充——Sass 改在编译期（产物固化），本节改在运行期（页面加载时生效）。没有构建环境的项目、需要运行时换肤的项目，都走这条路。 第一条路：改 CSS 自定义属性 判读：CSS 变量路线改的是「值」，不动「规则」。组件样式表里写着 ，你把变量换成 0.6rem，所有引用处同时换装。它的局限也在这里：只有框架暴露成变量的值能这样改，间距刻度、断点阈值这类编译期展开的东西不在其中。
5.2 CSS 定制：不碰源码的覆盖术
不编译源码也能定制：Bootstrap 5 把主题色、字体、圆角等关键值暴露成 CSS 自定义属性（
--bs-primary这类变量），运行期改一处即可换装；更细的改动靠选择器覆盖完成。本节立三条规矩：改属性优于写覆盖、覆盖要算清优先级、作用域尽量小。
位置：定制章第二案，与 5.1 互为补充——Sass 改在编译期（产物固化），本节改在运行期（页面加载时生效）。没有构建环境的项目、需要运行时换肤的项目，都走这条路。
第一条路：改 CSS 自定义属性
/* 框架在 :root 上登记了一组运行期变量：改它们，引用处全部跟着变 */ :root { --bs-primary: #0f9d8f; /* 主色（部分组件引用） */ --bs-body-color: #25313a; /* 正文字色 */ --bs-body-bg: #fbfbf9; /* 页面底色 */ --bs-border-color: #d8dee3; /* 默认边框色 */ --bs-border-radius: 0.6rem; /* 全局圆角基准 */ --bs-link-color: #0f766e; /* 链接色 */ } /* 夜间主题：换个作用域，同一批变量另一套值 */ [data-bs-theme="dark"] { --bs-body-color: #d7dde3; --bs-body-bg: #14181d; --bs-border-color: #333d47; }
<!-- data-bs-theme 是官方内置的明暗开关：属性一换，变量组整体切换 --> <html lang="zh-CN" data-bs-theme="light"> ... </html> <!-- 脚本一行即可切换：document.documentElement.setAttribute 同名换值 -->
判读：CSS 变量路线改的是「值」，不动「规则」。组件样式表里写着 border-radius: var(--bs-border-radius)，你把变量换成 0.6rem，所有引用处同时换装。它的局限也在这里：只有框架暴露成变量的值能这样改，间距刻度、断点阈值这类编译期展开的东西不在其中。
第二条路：选择器覆盖与优先级算术
/* 覆盖守则一：能加作用域就不全局改 —— 只动「我的页头里的按钮」 */ .hero .btn-primary { --bs-btn-bg: #0f9d8f; /* 优先改组件自己的变量，而不是硬写属性 */ --bs-btn-hover-bg: #0c8579; --bs-btn-active-bg: #0a6d64; } /* 覆盖守则二：需要硬写属性时，选择器强度要压过框架 —— 框架按钮是单类选择器（.btn-primary），你用「双类」或「类 + 元素」即可胜出， 不必动用 id 与 !important 两个大杀器 */ .navbar .nav-link { font-size: 1.05rem; letter-spacing: 0.02em; } /* 覆盖守则三：批量微调走工具类 API（Sass 侧的一句话扩展，编译后成为正式工具类） */ /* 本例在 Sass 入口里写：注册一个 bg-brand 工具类 */ /* @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; $utilities: map-merge($utilities, ("background-color": map-merge( map-get($utilities, "background-color"), (values: map-merge(map-get(map-get($utilities, "background-color"), "values"), (brand: var(--bs-brand))))))); @import "bootstrap/scss/utilities/api"; */ /* 用法：页面里直接写 class="bg-brand" */
<!-- 效果核验：三种覆盖在页面里的样子 --> <header class="hero"> <button class="btn btn-primary">页头按钮：青绿装（变量覆盖）</button> </header> <nav class="navbar"> <a class="nav-link">导航链接：字号微调（选择器覆盖）</a> </nav> <div class="bg-brand p-3">品牌底色块（工具类 API 扩展）</div>
⚠️ 常见坑：
!important在 Bootstrap 里遍地都是——工具类（p-3、d-none）全部带它，以保证「最后说了算」。这带来两个后果：其一，你写的自定义 CSS 想覆盖某个工具类时，普通写法必输，得同样加!important或干脆内联 style；其二，别把!important当日常手段层层叠加——两层 important 之间还得比优先级，越叠越乱。正确姿势是：要覆盖组件，改它的--bs-*变量；要覆盖工具类，用内联或更高强度的作用域。
第三条路：作用域隔离——覆盖的最后防线
主题模板、嵌入式组件这些「宿主页面已有自己样式」的场景，覆盖可能互相污染。现代解法是 CSS 级联层：
/* 先声明层顺序：后声明的层整体胜过先声明的层，与选择器强度无关 */ @layer bootstrap, override; @layer bootstrap { /* 框架样式（或引入的框架样式文件整体划入此层） */ } @layer override { /* 你的覆盖层：哪怕选择器更弱，也稳定胜出 */ .btn-primary { --bs-btn-bg: #0f9d8f; } }
把框架样式放进低优先层、自己的覆盖放进高优先层，层与层之间的胜负由声明顺序决定，选择器强度不再参与跨层比较。不支持的老浏览器会忽略层声明回退到普通层叠——渐进增强，不破坏现有页面。项目里样式互相打架、优先级竞赛失控时，这判能一锤定音。
案例：不改源码的「品牌化」三小时改造
背景：公司官网用 CDN 引 Bootstrap，没有构建管线。设计要求：主色青绿、正文用思源宋体、卡片圆角 16px、页脚深色。约束：不装 Node 工具链。
操作：CDN 样式之后挂一个自定义样式块（或外链自定义 css），内容三段——:root 里改 --bs-primary 相关引用与 --bs-border-radius: 1rem；body 上设 font-family（字体栈：思源宋体、宋体、serif 兜底）；页脚 .site-footer 判 data-bs-theme 属性为 dark 的局部作用域，复用官方暗色变量组。
结果：按钮、链接、焦点环换装青绿；卡片、输入框、徽章全体 16px 圆角；正文宋体渲染；页脚自动获得暗色组件（浅色文字、深色底），无一条硬编码颜色。
解读：全程没写一条「对框架选择器的属性覆盖」，只改变量与字体栈——改值不改规则，是覆盖术的最高境界：框架升级时你的自定义层几乎零维护。
变式：若「品牌化」需求进一步要求栅格沟槽从 24px 改 16px，运行期手段到头了（沟槽是编译期常量），此时判升级：要么用 g-2 工具类逐处判（改用法不改法典），要么上 5.1 节的 Sass 路线（改法典）。三级手段的边界感，就是 5.4 节裁决阶梯的预习。
结案要点
- 三条路优先级递降：改
--bs-*变量、作用域选择器覆盖、内联救急； data-bs-theme是官方明暗切换，变量组整体联动，白送一套夜间主题；- 工具类全带
!important，覆盖它用内联或更高强度作用域，别叠 important； - 样式污染的终判是级联层：层顺序定胜负，选择器强度退场；
- 运行期能改的只有暴露成变量的值，刻度与断点仍归 Sass 辖区。
下一节看生态补给：图标库与主题模板。