<p>不能靠 import CSS 文件实现按需加载，必须用 Sass 源码编译：因 bootstrap.min.css 是全量产物，无条件编译机制；真按需需前置导入 functions/variables/mixins（顺序不可错），再细粒度导入 grid、buttons 等模块，并通过 $enable-* 变量禁用未用组件。</p>
不能靠 import 'bootstrap/dist/css/bootstrap.css' 实现按需——它永远加载全部 192KB+ 的 CSS 规则，哪怕你只用了 btn 和 container。真按需，必须走 Sass 源码编译流程，手动控制导入路径和变量开关。
为什么直接 import CSS 文件不行
浏览器加载的 bootstrap.min.css 是构建好的全量产物，没有条件编译、没有 tree-shaking。Sass 编译器只拼接内容，不分析 HTML 中是否真用了 mt-5 或 card-img-top。删 class 不等于删 CSS，体积一分不减。
- 现象：
import 'bootstrap/dist/css/bootstrap.min.css'后 Lighthouse 报告 CSS 未使用率 >70% - 本质：这是最终输出，不是源码；你无法在运行时“关掉”某个组件的样式
- 替代方案只有两个：用 Sass 源码重编译，或用 PurgeCSS 扫描 HTML 做后处理（但后者不处理 JS 动态添加的 class）
必须前置导入 functions/variables/mixins 且顺序不能错
跳过任一环节或顺序颠倒，编译会立刻失败，比如报 SassError: Undefined variable "$grid-columns"——这不是路径问题，是依赖链断裂。
-
@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等具体模块
如何只引入 grid + buttons + 部分 utilities
别碰 @import "bootstrap/scss/bootstrap";，它是体积罪魁。改用细粒度路径，并主动切断隐式依赖链。
立即学习“前端免费学习笔记（深入）”；
- 删掉全量入口，改写为：
@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";
- 在
@import "bootstrap/scss/variables";前加变量开关，禁用未用组件生成逻辑：$enable-tooltip: false !default; $enable-modal: false !default; $enable-carousel: false !default;
- 可删（90% 项目适用）：
tooltip、popover、carousel、offcanvas、toast - 谨慎删：
forms——表单控件依赖reboot中的 border/padding，删前务必检查.form-control渲染是否错乱 - 别删：
reboot和type——它们重置html/body默认样式和基础排版，删了会导致按钮字体异常、列表缩进错乱等隐蔽问题
容易被忽略的两个坑
一是构建工具必须支持递归 @import 解析，比如 Vite 默认支持，但某些旧版 postcss-import 配置可能不处理嵌套 @import，导致 grid 里引用的 $grid-columns 找不到；
二是 HTML 中不能再留着 CDN 引入的 bootstrap.min.css，常见错误是 Sass 已精简编译了，但 index.html 里还挂着 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">，结果样式重叠、优先级混乱、调试困难。
