为什么直接改CSS会越改越乱
很多人拿到Bootstrap模板后，第一反应是打开编译后的CSS文件，搜到颜色值直接替换。这样做的后果是：升级Bootstrap时所有改动丢失，样式优先级越来越乱，文件体积只增不减。
更合理的做法是从源码层面定制，利用Bootstrap提供的Sass变量和构建流程，让定制结果可维护、可升级。
从变量覆盖开始
Bootstrap 5的Sass源码把颜色、间距、字体、圆角、断点等全部抽成变量。定制第一步是建立自己的变量覆盖文件，在导入Bootstrap之前声明。
// custom.scss
$primary: #2f6f4e;
$border-radius: 0.25rem;
$font-family-sans-serif: “Noto Sans SC”, system-ui, sans-serif;
@import “bootstrap/scss/bootstrap”;
只改这几个变量，就能让整站主色、圆角、字体统一变化，而不需要碰任何一条具体规则。变量覆盖的顺序很关键：必须在导入Bootstrap之前。
按需编译，砍掉用不到的模块
Bootstrap完整CSS约200KB（压缩后）。如果项目只用栅格、按钮、表单和模态框，没必要全量引入。
通过Sass的@import按需加载：
// 只导入需要的部分
@import “bootstrap/scss/functions”;
@import “bootstrap/scss/variables”;
@import “bootstrap/scss/mixins”;
@import “bootstrap/scss/grid”;
@import “bootstrap/scss/buttons”;
@import “bootstrap/scss/forms”;
@import “bootstrap/scss/modal”;
@import “bootstrap/scss/utilities”;
这样编译出的CSS通常能减少40%以上。注意functions、variables、mixins是其他模块的依赖，必须保留。
用CSS变量做运行时定制
Bootstrap 5.2之后大量组件改用CSS自定义属性。这意味着可以在不重新编译的情况下，通过根选择器覆盖：
:root {
–bs-primary: #2f6f4e;
–bs-body-font-size: 1rem;
}
适合需要主题切换或多品牌适配的场景。但要注意，CSS变量覆盖的范围有限，涉及Sass函数计算的值（如颜色对比、阴影）仍需在编译期处理。
组件重构的边界
模板定制常遇到“Bootstrap组件长得不像设计稿”的情况。此时有两种选择：
一是用工具类组合出目标样式，保留Bootstrap结构，只加自己的类；二是直接重写组件样式，但会导致后续升级困难。
建议优先用工具类和CSS变量解决。只有当组件结构与设计差异过大时，才考虑基于Bootstrap的Sass mixin重新生成组件样式，而不是覆盖编译后的类。
避免升级冲突的三条原则
第一，不修改Bootstrap源码文件，所有定制放在独立文件中。第二，变量覆盖集中在单一入口，不散落在多个文件。第三，组件级覆盖使用更高特异性选择器时，尽量限定在自定义命名空间下，减少与Bootstrap默认类的耦合。
做到这三点，Bootstrap小版本升级通常只需重新编译，不需要逐条排查样式冲突。
