必须先删除 bootstrap.min.css 全量引入，再按需导入 sass 模块并精简 utilities；官网定制页需取消全选，仅勾选实际使用的组件与断点，删减后务必真机验证。
直接删掉 bootstrap.min.css，否则所有优化都白做——这是绝大多数人卡住的第一步。
删掉全量 CSS 引入是前提，不是可选项
几乎所有体积问题的根源，就是项目里还留着这行：@import "bootstrap/dist/css/bootstrap.min.css" 或 <link href="bootstrap.min.css">。它会把全部 200KB+ 的 CSS 一次性加载进来，后续任何 Sass 配置、变量覆盖都救不回来。
- Webpack/Vite 项目：检查
main.js、app.scss或index.html，删掉所有对bootstrap.min.css的直接引用 - 纯静态页：删掉
<link>标签，改用官网定制页生成的精简 CSS，或自己编译 - CDN 场景下别硬扛 Sass，但必须先断开旧链接，否则新 CSS 不生效
按需导入 Sass 模块时顺序不能错
Bootstrap 的 Sass 模块有隐式依赖，顺序错了会导致编译失败或样式错乱（比如按钮变扁、表格边框消失）。
- 必须前置导入（且严格按此顺序）：
@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 不是开关，是生成规则，得手动精简
只写 @import "bootstrap/scss/utilities"; 看似“按需”，实则默认生成所有断点（xs/sm/md/lg/xl/xxl）、所有间距层级（mt-1 到 mt-5）、所有状态变体（mt-md-3、mt-hover-3），体积可能比几个组件加起来还大。
- 先覆盖
$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"; - 禁用 hover/focus 工具类要谨慎——按钮和表单交互依赖这些类，删了 JS 行为可能失效
没构建流程？用官网定制页，但必须「取消全选」
纯静态页、老系统嵌入、邮件模板这类场景，Sass 编译走不通，官网定制页（getbootstrap.com/docs/5.3/customize/）是唯一现实选择——但它默认勾选的模块远超实际需要。
- 打开后第一件事是点「Deselect all」，别信默认勾选项
- 只勾你真正在 HTML 里写了的类名对应模块：用了
btn就勾 Buttons，用了container和row就勾 Grid，没用toast就别勾 Toasts - Utilities 里容易被忽略的是响应式间距类（如
ms-lg-3），如果只在移动端布局，就别勾 lg/xl/xxl 断点相关项 - 导出的是纯 CSS，无 JS、无图标、无变量，
<link>直接引入即可，但无法改主色或删动画
真正难的不是“怎么删”，而是判断“哪些真没用”——比如 reboot 看似只是重置，删了却会让第三方组件样式崩；utilities/_screen-reader 虽然代码少，但影响无障碍访问。每删一个模块，都要在真实设备上测一遍表单、按钮、响应式栅格是否仍正常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
