必须先删除bootstrap.min.css，再按需导入sass模块：①前置导入functions、variables、mixins；②可选reboot；③按需导入grid、buttons等组件；④精简utilities的breakpoints、spacers及utility组；⑤cdn项目用官网定制页勾选实际用到的模块。
直接删掉 bootstrap.min.css，否则一切优化都无效
几乎所有体积问题的根源，就是项目里还留着这行：@import "bootstrap/dist/css/bootstrap.min.css" 或 <link href="bootstrap.min.css">。它会把全部 200KB+ 的 CSS 一次性加载进来，后续任何 Sass 配置、变量覆盖都救不回来。必须先从构建入口或 HTML 中彻底移除它，再开始按需引入。
用 Sass 手动 @import 时，基础模块顺序不能错
Bootstrap 的 Sass 模块有隐式依赖关系，顺序错了会导致编译失败或样式丢失。比如 _buttons.scss 依赖 _functions、_variables、_mixins，但不依赖 _reboot；而 _grid.scss 又依赖 _reboot。常见错误是跳过 _reboot 或把 _utilities 放太前。
- 必须前置导入（顺序固定）：
@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";等 - 避免导入
bootstrap/scss/bootstrap—— 这个文件就是全量入口，和 CDN 效果一样
$utilities 不是开关，而是生成规则，要精简得改 map
只写 @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";
CDN 场景下别硬扛，用定制页导出精简 CSS
如果项目没构建流程（纯静态页、老系统嵌入、邮件模板），Sass 编译这条路走不通。这时官网定制页（getbootstrap.com/docs/5.3/customize/）是唯一现实选择——但它不是万能的。
- 打开后第一件事是点「Deselect all」，别信默认勾选项
- 只勾你真正在 HTML 里写了 class 的模块：比如用了
btn和container，就只勾 Buttons 和 Containers；别顺手勾 Utilities，它默认带全部响应式间距类 - 导出的是纯 CSS，不支持改颜色、删动画、调字体，也**不包含 JS**——JS 得另配，且不能和这个 CSS 文件混用同一套变量
- 导出的文件名不含版本号，每次更新组件后必须重新导出，没法自动化
真正难的不是选哪几个组件，而是确认哪些 class 确实被用了。HTML 里写了个 text-center，却忘了勾 Utilities → Typography，结果文字不居中——这种漏配比体积本身更常导致线上问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
