bootstrap 5 唯一官方支持按需加载 css，必须通过 sass 源码编译实现：前置导入 functions→variables→mixins，再选择性导入 grid、buttons 等模块，并手动精简 utilities 和断点，否则体积不降反升。
Bootstrap 5 的 CSS 架构不是“更有利于”，而是**唯一官方支持按需加载的版本**——它把整套样式系统彻底拆解为可独立导入的 SCSS 模块，且明确依赖顺序和边界。这不是设计偏好，是工程约束。
为什么必须用 Sass 源码才能按需加载？
bootstrap/dist/css/bootstrap.min.css 是全量编译产物，没有运行时条件判断或动态导入机制；浏览器加载它时，所有 class（哪怕你一页都没用）都会解析、计算、渲染。
真正能控制“只加载什么”的，只有构建期：
• functions、variables、mixins 必须前置导入——它们不生成 CSS，但后续所有模块都依赖它们定义的逻辑（比如 $grid-columns、breakpoint-min()）
• 任何模块（如 grid、buttons）都是独立 .scss 文件，内部不隐式引入其他模块
• utilities 是个特例：它默认包含全部工具类组（spacing、border、shadow…），必须手动覆盖 $utilities 变量来剔除不用的部分，否则体积不降反升
常见错误：Sass 编译失败但看不出原因
现象：SassError: Undefined variable "$grid-columns" 或 Undefined mixin "float-left"
根本原因不是路径写错，而是导入顺序或缺失前置依赖：
• 忘了 @import "bootstrap/scss/functions" → 后续所有变量和 mixin 都不可用
• 把 @import "bootstrap/scss/grid" 放在 variables 前 → $grid-columns 还没声明
• 用相对路径（如 @import "./node_modules/bootstrap/scss/..."）但构建工具没配 includePaths → 找不到文件
JS 组件必须同步按需导入，否则行为断裂
CSS 按需后，data-bs-toggle="modal" 这类属性不会自动生效：
• Modal 类没 import，DOM 上有 data-bs-toggle 也触发不了模态框
• 即使只用 Tooltip，也得单独 import { Tooltip } from 'bootstrap/js/dist/tooltip'
• bootstrap.bundle.min.js 是全量 JS + Popper，体积约 58KB（未压缩），按需后可压到 5–10KB
定制后升级 Bootstrap 版本会踩什么坑？
Bootstrap 5.3 的 scss/bootstrap.scss 入口文件里新增了模块（比如 scrollbar）、重命名了变量（如 $enable-negative-margins → $enable-negative-utility），但你的自定义 custom-bootstrap.scss 不会自动同步：
• 新增组件没手动加 @import → 页面上用了却没样式
• 变量名变更后仍沿用旧名覆盖 → 编译不报错，但对应功能失效（比如圆角开关失灵）
• mixins 内部逻辑调整（如 container-variables() 参数变化）→ 自定义容器类编译失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
