按需加载Bootstrap必须严格按序导入functions、variables、mixins等模块，禁用未用组件和断点，并在variables前定义$enable-*变量，否则将回退全量192KB。
不能靠 @import "bootstrap/scss/bootstrap" 或 import 'bootstrap/dist/css/bootstrap.min.css' 实现按需——它永远加载全部 192KB，无论你页面里只用了 btn 还是 container。
必须前置导入 functions/variables/mixins 且顺序不能错
跳过任一模块或顺序颠倒，编译会直接失败。常见报错如 SassError: Undefined variable "$grid-columns" 就是因为 @import "bootstrap/scss/variables" 没在 grid 前加载。
-
@import "bootstrap/scss/functions"必须第一行，提供map-get()、color-contrast()等底层函数 -
@import "bootstrap/scss/variables"必须第二行，定义$primary、$grid-columns，几乎所有组件都依赖它 -
@import "bootstrap/scss/mixins"必须第三行，封装button-variant()、media-breakpoint-up()等逻辑
只引入 grid + buttons + 部分 utilities 的写法
别碰全量入口 @import "bootstrap/scss/bootstrap"，它就是体积罪魁。改用细粒度路径，并主动切断隐式依赖链：
- 删掉所有
@import "bootstrap/scss/bootstrap"或import 'bootstrap/dist/css/bootstrap.min.css' - 新建
src/custom-bootstrap.scss，严格按序写入：@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/mixins";@import "bootstrap/scss/grid";@import "bootstrap/scss/buttons";@import "bootstrap/scss/utilities/text";@import "bootstrap/scss/utilities/spacers"; - 若项目没用到阴影、负边距、打印样式，就别引入
shadows、negative-margins、print
禁用未用组件必须靠 $enable-* 变量，且要在 variables 前定义
$enable-modal: false 不是隐藏 modal，而是让编译器跳过生成它的全部 CSS 和 JS 逻辑。光删 @import "bootstrap/scss/modal" 可能无效——因为 tooltip 或 dropdown 会隐式拉入它。
立即学习“前端免费学习笔记（深入）”；
- 在
@import "bootstrap/scss/variables"之前加：$enable-tooltip: false !default;$enable-modal: false !default;$enable-carousel: false !default; - 搜
node_modules/bootstrap/scss/_variables.scss里所有以$enable-开头的变量，按需关闭 - 注意：这些变量必须带
!default，且必须写在@import "bootstrap/scss/variables"之前，否则会被源文件默认值覆盖
精简断点和 utilities 是体积下降的关键，不是“锦上添花”
就算只导入 grid 和 buttons，默认 $grid-breakpoints（xs/sm/md/lg/xl）和完整 $utilities map 仍会生成冗余规则。比如你只在 md 及以上用间距类，却让 mt-3 在 5 个断点各输出一遍。
- 重定义
$grid-breakpoints，例如只留：$grid-breakpoints: (xs: 0, md: 768px); - 收缩
$spacers范围，例如跳过中间值：$spacers: (0: 0, 2: .5rem, 4: 1rem, 6: 1.5rem); - 禁用整类工具：
$enable-shadows: false;$enable-negative-margins: false; - 这些变量也必须在
@import "bootstrap/scss/variables"之前赋值，且不能带!default（否则不生效）
真正容易被忽略的是：所有变量开关、断点重定义、utilities 子模块选择，都必须发生在 Sass 编译期；运行时无法干预。一旦漏掉 !default 位置或顺序，或者构建工具没配好 sass-loader 的 resolve.alias，就会默默回退到全量样式——而你可能要等上线后看 Lighthouse 报告才发现 CSS 未使用率 >70%。
