<p>真正可行的路径只有一条：用 Sass 源码手动编译实际需要的 CSS 模块；必须前置导入 functions、variables、mixins，再按需引入 grid、buttons 等组件及 utilities 子模块，并通过 $enable-* 变量禁用未用组件，否则无法实现按需加载。</p>
不能直接通过 import 或 require 按需加载 bootstrap/dist/css/bootstrap.min.css 中的某一部分——它本身就是个全量打包产物，没有运行时拆分能力。真正可行的路径只有一条：用 Sass 源码手动编译你实际需要的 CSS 模块。
必须走 Sass 编译流程，否则按需无从谈起
Bootstrap 5 官方不提供任何 JS 驱动的 CSS 按需加载机制（比如类似 unplugin-vue-components 那种自动导入）。所谓“按需”，本质是构建时控制 @import 范围。这意味着：
- 项目必须已配置 Sass 支持（
vite-plugin-sass或sass-loader） - 要删掉所有对
bootstrap/dist/css/bootstrap.min.css的直接引用 - 新建一个自定义
.scss文件（如src/assets/custom-bootstrap.scss），在里面精确控制导入顺序和模块 -
functions→variables→mixins必须前置，缺一不可，否则后续组件 import 会报错
只导入你真正在用的组件和工具类
很多人以为删掉 components/alert 就能省下几 KB，其实体积大头常藏在 utilities —— 默认开启全部断点 + 全部属性会生成上千条 CSS 规则。实操建议：
- 先注释掉
@import "bootstrap/scss/utilities"，看页面是否炸；没炸，说明你根本没用 utility 类，直接跳过 - 如果用了
mt-2、text-center这类，再按需重写$utilities映射表，只保留你用到的键（如margin,text-align） - 精简断点：
$grid-breakpoints: (xs: 0, md: 768px)，删掉sm/lg/xl可减少 40%+ utility 体积 - 组件导入示例（只用按钮和容器）：
@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; // 确认需要后再开 @import "bootstrap/scss/components/buttons"; @import "bootstrap/scss/layout/container";
别忽略 BootstrapVue Next 的组件级按需能力
如果你同时用 BootstrapVue Next（即 @bootstrap-vue-next/bootstrap-vue-next），它的组件是 ESM 导出，支持真正的 JS 层按需引入——但这和 CSS 按需无关，只是避免加载未用组件的 JS 逻辑。注意：
立即学习“前端免费学习笔记（深入）”；
- 仍需单独处理 CSS（即上文 Sass 编译），否则
BButton组件渲染出来没样式 - 全局注册所有组件（
app.use(BootstrapVueNext)）会绕过 tree-shaking，必须局部注册或按需导入：import { BButton } from '@bootstrap-vue-next/bootstrap-vue-next' - 不要混用：一边用 Sass 按需编译 CSS，一边又引入
bootstrap/dist/css/bootstrap.min.css，会导致样式重复甚至冲突
最易被忽略的一点：Sass 编译后的 CSS 是否真的没冗余，不能靠猜。务必用 rollup-plugin-visualizer 或 webpack-bundle-analyzer 打开产物分析面板，确认最终 CSS chunk 里没有 accordion、carousel 这类完全没用到的模块选择器——有时候一个漏掉的 @import 就让体积翻倍。
