直接引入 bootstrap.min.css 就是全量加载，无法按需；它仅压缩字符未删功能，所有组件和工具类完整保留，真正减负需从 Sass 源码层禁用无关模块并精简断点与 utilities。
直接引入 bootstrap.min.css 就是全量加载，没法按需
你看到的 bootstrap.min.css 是压缩后的全量产物，只删了空格和注释，没删任何类或规则。哪怕项目里只用了 btn 和 container，.carousel、.offcanvas、所有断点下的 mt-5 仍完整存在。gzip 后约 20–25KB，但其中 70% 以上是未使用的 CSS 字节。
唯一可靠方式：用 Sass 源码手动 @import 所需模块
必须走官方 Sass 编译链，其他方案（如 PurgeCSS 扫 bootstrap.min.css）基本无效——它识别不了 data-bs-toggle 属性、JS 动态拼接的类、模板条件渲染的 utility 类。
- 删掉所有
import 'bootstrap/dist/css/bootstrap.min.css'或@import "bootstrap/scss/bootstrap" - 新建
src/custom-bootstrap.scss，严格按序导入：@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→@import "bootstrap/scss/mixins" - 只加真正用到的组件，例如：
@import "bootstrap/scss/buttons"、@import "bootstrap/scss/grid"、@import "bootstrap/scss/utilities/text"（别用整套utilities） - 显式跳过不用的模块：注释掉
@import "bootstrap/scss/modal"、@import "bootstrap/scss/print"（后者含大量打印样式，多数项目不需要）
$grid-breakpoints 和 $utilities 不精简，体积白减一半
就算只导入 buttons 和 grid，默认断点（xs/sm/md/lg/xl）和完整 $utilities map 仍会生成冗余规则。比如你只在 md 及以上用间距类，却让 mt-3 在 5 个断点各输出一遍。
- 重写
$grid-breakpoints，例如只留：$grid-breakpoints: (xs: 0, md: 768px); - 删掉
utilities中不用的子模块，如不用阴影就跳过@import "bootstrap/scss/utilities/shadows" - 禁用未用状态变体（
hover、focus）可进一步缩小，但注意按钮交互依赖:hover，别一刀切
构建工具必须能解析 node_modules/bootstrap/scss/ 路径
Webpack 需配 sass-loader + resolve.alias；Vite 默认支持，但若报 Can't find stylesheet，检查是否漏装 bootstrap 包（npm install bootstrap），或 scss 文件里路径写错成 bootstrap/scss/_functions.scss（不该带下划线）。
立即学习“前端免费学习笔记（深入）”；
最终 CSS 体积可压至 20–40KB（gzip 前），比全量 192KB 下降超 70%。最容易被忽略的是 print.scss 和深色模式相关规则——它们不靠 JS 触发，也不在 HTML 里显式出现，但默认就在编译链里，必须手动剔除。
