bootstrap 的 dist/ 目录无真正按需 css：bootstrap-grid.min.css 仍含 btn/form 等样式，因其源文件 bootstrap-grid.scss 显式导入 buttons 和 forms；仅 bootstrap-reboot.min.css 是纯重置、可单独引入；真正按需须用 scss 源码手动导入并配置变量开关。
不能按需引入编译后的 CSS 组件。所有 bootstrap/dist/css/ 下的文件（如 bootstrap.min.css、bootstrap-grid.min.css）都是全量构建产物，没有 tree-shaking，也没有条件编译——你 import 哪个，就加载哪个完整包。
为什么 bootstrap-grid.min.css 仍然包含按钮、表单等样式？
因为 Bootstrap 5 的 dist/ 目录里根本不存在真正“只含 grid”的 CSS。所谓 bootstrap-grid.min.css 是官方打包脚本生成的「精简版全量」：它删掉了 modal、tooltip 等 JS 绑定组件的样式，但保留了所有依赖 grid 的通用类（比如 container、row、col），同时仍混入 btn、form-control 等基础组件的 reset 和通用规则。实测体积仍在 40KB+，且无法进一步剔除。
- 查看源码可确认：
bootstrap-grid.scss文件本身会@import "components/buttons"和"forms"—— 它不是纯 grid - Lighthouse 报告中「未使用 CSS」通常 >60%，证明它远非按需
- 即使你页面里一个
btn都没写，bootstrap-grid.min.css里依然有.btn规则
哪些 dist/ 文件是真隔离的？
只有 bootstrap-reboot.min.css 是严格单一职责的：它只包含 normalize.css 衍生的重置样式（*, html, body, h1–h6...），无组件、无工具类、无断点，体积约 2KB。其余所有 .min.css 文件都隐式携带跨模块依赖。
-
bootstrap-reboot.min.css→ 可安全单独引入，用于重置而不污染 -
bootstrap-utilities.min.css→ 名为 utilities，实际含全部断点 + 全部工具类变体（mt-1到mt-xxl-5），体积 ≈ 28KB -
bootstrap.min.css/bootstrap-grid.min.css→ 都含container、row、col、btn、form、table等，差异极小
想真正按需，必须放弃 dist/，走 Sass 源码编译
唯一可控路径是用 node_modules/bootstrap/scss/ 下的源文件手动组织导入链。这要求你的构建工具（Vite、Webpack 等）已配置 sass 加载器并支持 node_modules 路径解析。
- 顺序不可错：
@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"; - 禁用冗余组件必须在
variables前写：$enable-modal: false !default;，否则某些模块仍会悄悄生成样式 - utilities 必须拆开引入，
@import "bootstrap/scss/utilities";是全量入口，绝不能碰
最易被忽略的一点：JS 组件和 CSS 模块是解耦的。你按需编译了 CSS，但若页面用了 data-bs-toggle="collapse"，就必须同步 import { Collapse } from 'bootstrap/js/dist/collapse'，否则行为完全失效——这不是警告，是静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
