bootstrap 5 按需加载必须通过 sass 编译实现，直接 import css 会加载全量样式（约192kb）；需按序导入 functions、variables、mixins，并细粒度引入模块、关闭未用组件变量、精简断点，配合构建工具正确解析路径。
不能直接通过 import 语句按需引入 CSS 文件——Bootstrap 5 的按需加载必须走 Sass 编译流程，否则你引入的仍是全量 CSS。
为什么 import 'bootstrap/dist/css/bootstrap.min.css' 不算按需
这行代码会无条件加载全部组件、全部断点（xs 到 xxl）、全部工具类变体（比如 mt-1 到 mt-xxl-5），体积固定在 ~192KB。Sass 编译器不做 tree-shaking，只拼接内容，删掉 HTML 里不用的 class 完全不影响输出体积。
必须前置导入 functions、variables、mixins
顺序错或漏一个，后续模块编译就会报错，比如 SassError: Undefined variable "$grid-columns"。它们不是可选依赖，而是整个样式系统的基石：
-
@import "bootstrap/scss/functions";—— 提供color-contrast()、map-get()等底层函数 -
@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/grid";、@import "bootstrap/scss/buttons"; - utilities 拆开引入：
@import "bootstrap/scss/utilities/text";、@import "bootstrap/scss/utilities/spacers";，别碰utilities总入口 - 禁用隐式依赖：在
@import "bootstrap/scss/variables";前加$enable-tooltip: false !default;，同理关掉$enable-modal、$enable-dropdown - 精简断点：重定义
$grid-breakpoints: (xs: 0, md: 768px);，避免生成lg/xl/xxl对应的媒体查询
构建工具要能解析 node_modules 路径
Vite 或 Webpack 必须配好 sass-loader（Webpack）或原生 Sass 支持（Vite 默认支持），且确保能从 node_modules/bootstrap/scss/ 正确定位文件。常见失败是路径 404，检查 @import 路径是否拼错、是否漏了 ~ 前缀（部分配置需要）。
最易被忽略的一点：光删 @import 行不等于真正移除代码——某些组件（如 tooltip）会被 popover 或 dropdown 隐式拉入，必须靠 $enable-* 变量在变量层切断生成逻辑，否则编译结果里仍有冗余 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
