必须先删除 bootstrap.min.css 全量引入，否则体积优化无效；再按序导入 SCSS 模块、按需加载组件、精简 utilities 变量与断点；CDN 项目可用官网定制页导出精简 CSS。
必须先删掉 bootstrap.min.css，否则所有按需操作都白做——它会把全部 200KB+ 的 CSS 一次性塞进打包结果，后续任何 Sass 配置、变量覆盖都救不回来。
删掉全量 CSS 引入是第一步，也是最关键的一步
检查项目里是否还留着这些行：
-
@import "bootstrap/dist/css/bootstrap.min.css";（Sass 文件中） -
<link href="bootstrap.min.css">（HTML 中） -
import 'bootstrap/dist/css/bootstrap.min.css';（JS/TS 中）
只要其中任意一个存在，就等于主动放弃体积优化。Webpack/Vite 不会“覆盖”它，只会叠加加载。
用 Sass 手动 @import 时顺序不能错
Bootstrap 的 SCSS 模块之间有隐式依赖，顺序错了要么编译失败，要么按钮、表格等基础样式直接错位。
立即学习“前端免费学习笔记（深入）”；
- 必须前置且严格按序：
@import "bootstrap/scss/functions";→@import "bootstrap/scss/variables";→@import "bootstrap/scss/mixins"; -
@import "bootstrap/scss/reboot";推荐保留（删了会导致重置失效，按钮边框、表格内边距全乱） - 组件按需加：
@import "bootstrap/scss/grid";、@import "bootstrap/scss/buttons";、@import "bootstrap/scss/forms";等 - 绝对不要写
@import "bootstrap/scss/bootstrap";——这是全量入口，和 CDN 效果一样
$utilities 不是开关，精简它要改 map 而非只 import
只写 @import "bootstrap/scss/utilities"; 看似按需，实则默认生成全部断点（xs/sm/md/lg/xl/xxl）、全部间距层级（mt-1 到 mt-5）、全部状态变体（mt-md-3、mt-hover-3），体积可能比 grid + buttons 加起来还大。
- 先覆盖
$grid-breakpoints，例如只留：$grid-breakpoints: (xs: 0, md: 768px); - 再精简
$spacers，删掉不用的层级：$spacers: (0: 0, 1: 0.25rem, 2: 0.5rem, 4: 1rem); - 在
@import "bootstrap/scss/utilities"前，注释掉不需要的 utility 组，比如：// @import "bootstrap/scss/utilities/_shadows";
CDN 项目没构建流程？用官网定制页导出精简 CSS
如果项目没配 Sass 构建（比如纯 HTML + CDN），官网定制页（https://getbootstrap.com/docs/5.3/customize/）是最直接的方案：取消全选，只勾你需要的组件（如 Button、Grid、Reboot），导出的 CSS 是纯静态文件，不含 JS、图标或外部依赖。
- 导出的 CSS 不支持改主题色、删断点、删动画——这些必须走 Sass 方式
- Utilities 里的响应式类（如
ms-lg-3）很容易悄悄拉高体积，勾选前务必确认真用得上 - 别勾 Forms、Dropdowns、Accordion 这类交互组件，除非页面真用了它们
真正容易被忽略的点是：reboot 不是可选项，而是布局基石；utilities 的体积陷阱不在“用了多少类”，而在“生成了多少规则”；而所有优化的前提，是那个被遗忘在 HTML 或 main.scss 里的 bootstrap.min.css 引用行。
