Bootstrap 5按需加载CSS的唯一官方方案是通过Sass源码编译：先npm安装完整源码，再在自定义.scss中按序导入functions、variables、mixins及所需模块（如grid、utilities等），禁用冗余工具类组并精简断点，可将CSS体积从192KB压至20–40KB。
Bootstrap 5 确实支持按需加载 CSS，但必须走 Sass 源码编译流程
直接引入 bootstrap/dist/css/bootstrap.min.css 就是全量加载，没法“按需”。真要减体积，唯一官方支持、零第三方依赖的方式是：用 npm 安装完整源码，再在你自己的 .scss 文件里手动 @import 需要的模块。
关键约束有三个：functions → variables → mixins 必须按序前置；删掉默认的全量导入语句；确保构建工具（如 Vite 或 Webpack + sass-loader）能解析 node_modules/bootstrap/scss/ 路径。
常见错误现象：SassError: Undefined variable "$grid-columns"，基本就是 variables 没在 grid 前导入，或者误删了 functions。
按需导入的典型模块组合怎么选
不是“越多越稳”，而是按项目真实使用收敛。多数中后台项目只需以下最小集合：
立即学习“前端免费学习笔记（深入）”；
@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/mixins";-
@import "bootstrap/scss/root";（重置根字体、CSS 变量） -
@import "bootstrap/scss/reboot";（基础 HTML 元素重置） -
@import "bootstrap/scss/type";（排版类，如h1、lead） -
@import "bootstrap/scss/containers";（container/container-fluid） -
@import "bootstrap/scss/grid";（栅格系统，必须搭配containers） -
@import "bootstrap/scss/utilities";（工具类，但注意下一条）
如果你只用 mt-2、text-center 这类基础工具类，别全量引入 utilities——先覆盖 $utilities 变量，删掉 shadow、border、position 等不用的组，否则生成的 CSS 会多出 30–50KB。
定制构建的优缺点非常分明
优点很实在：
- CSS 体积可压到 20–40KB（全量是 192KB），LCP 明显改善
- 变量和 mixin 全开放，改主题色、禁用圆角、关阴影都是一行变量的事
- 没有运行时解析开销，所有逻辑都在构建期完成
缺点也硬核：
- 一旦用了
data-bs-toggle="modal"这类 JS 组件，就必须同步做 JS 的按需导入（比如import Modal from 'bootstrap/js/dist/modal'），否则样式和行为割裂 - 升级 Bootstrap 版本时，得人工比对
scss/bootstrap.scss里的新模块、新变量，漏掉可能引发隐性样式异常 - 无法和纯 CDN 场景共存——如果项目里混着老页面用 CDN 引入，又新建页面走 Sass 编译，容易出现 class 行为不一致（比如
btn在 A 页面有 hover 效果，在 B 页面没有）
真正容易被忽略的是 utilities 的响应式断点。默认 $grid-breakpoints 包含 xs/sm/md/lg/xl/xxl 六档，但多数项目只在 md 和 lg 上做响应。不显式重写这个 map，光注释掉 utilities 里的某几行，生成的媒体查询规则仍会膨胀。这一步不做，按需就只完成了一半。
