如何在Bootstrap 5中按需引入特定的CSS组件模块？-css教程-PHP中文网

真按需必须走 sass 编译流程，因 import css 文件加载全量 192kb 且无 tree-shaking；需前置导入 functions/variables/mixins 并按序配置，再细粒度引入 grid、buttons 及所需 utilities 子模块，并通过变量开关禁用未用组件。

如何在bootstrap 5中按需引入特定的css组件模块？

不能靠 import 'bootstrap/dist/css/bootstrap.min.css' 实现按需——它永远加载全部 192KB，无论你页面里只用了 btn 还是 container。真按需，必须走 Sass 编译流程，手动控制导入路径和变量开关。

为什么直接 import CSS 文件不行

浏览器加载的 bootstrap.min.css 是构建好的全量产物，没有条件编译、没有 tree-shaking。Sass 编译器只拼接内容，不分析 HTML 中是否真用了 mt-5 或 card-img-top。删 class 不等于删 CSS，体积一分不减。

现象：import 'bootstrap/dist/css/bootstrap.min.css' 后 Lighthouse 报告 CSS 未使用率 >70%
本质：这是最终输出，不是源码；你无法在运行时“关掉”某个组件的样式
替代方案只有两个：用 Sass 源码重编译，或用 PurgeCSS 扫描 HTML 做后处理（但后者不处理 JS 动态添加的 class）

必须前置导入 functions/variables/mixins 且顺序不能错

跳过任一环节或顺序颠倒，编译会立刻失败，比如报 SassError: Undefined variable "$grid-columns"——这不是路径问题，是依赖链断裂。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

@import "bootstrap/scss/functions"; 必须第一行，提供 map-get()、color-contrast() 等底层函数
@import "bootstrap/scss/variables"; 必须第二行，定义 $primary、$grid-columns，几乎所有模块都读它
@import "bootstrap/scss/mixins"; 必须第三行，封装 button-variant()、media-breakpoint-up() 等逻辑
之后才能安全导入 grid、buttons 等具体模块

如何只引入 grid + buttons + 部分 utilities

别碰 @import "bootstrap/scss/bootstrap";，它是体积罪魁。改用细粒度路径，并主动切断隐式依赖链。

删掉全量入口，改写为：

@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";
@import "bootstrap/scss/utilities/spacers";

在 @import "bootstrap/scss/variables"; 前加变量开关，禁用未用组件生成逻辑：

$enable-tooltip: false !default;
$enable-modal: false !default;
$enable-dropdown: false !default;

精简断点：默认生成 xs/sm/md/lg/xl/xxl 六套媒体查询，多数项目只需两档：
```
$grid-breakpoints: (xs: 0, md: 768px) !default;
```

utilities 按需最易踩坑：别直接 import utilities 总入口

@import "bootstrap/scss/utilities"; 会无差别加载 spacing、border、shadow、position、display……哪怕你只用 mt-2 和 text-center，体积也暴涨 40KB+。

正确做法：只导入子模块，如 @import "bootstrap/scss/utilities/spacers";、@import "bootstrap/scss/utilities/text";
若必须用总入口，得先重写 $utilities 变量，删掉不用的组（查 node_modules/bootstrap/scss/_utilities.scss 里的 map 结构）
关键提醒：光注释掉某几行 @import 不起作用——utilities 内部会遍历整个 $utilities map，没删变量定义就照常生成 CSS

真正容易被忽略的是变量层的隐式依赖：比如你没导入 tooltip，但 popover 模块内部仍会拉入 tooltip 样式，除非用 $enable-tooltip: false 在变量定义阶段就切断。这步漏了，编译结果里照样有冗余 CSS。