怎样在Bootstrap 5中禁用不需要的CSS组件以减重-css教程-PHP中文网

$enable-*变量仅禁用js初始化，不删除css；真正减体积需手动导入所需模块、精简utilities和断点，并检查第三方依赖是否重新引入。

怎样在bootstrap 5中禁用不需要的css组件以减重

直接改 $enable-tooltip 这类变量不会删 CSS，只停 JS 初始化；真减体积必须跳过 bootstrap.scss 全量入口，手动导入所需模块。

为什么 $enable-* 变量对 CSS 体积没用

这些变量（如 $enable-popover、$enable-toast）只控制对应组件的 JavaScript 是否自动绑定事件和初始化行为。CSS 类名（比如 .tooltip、.popover）和全部样式规则依然会完整编译进输出文件——你看到“没效果”，只是因为 JS 没跑，不是样式没了。

唯一例外是 $enable-reduced-motion，它会影响部分动画类生成，但和组件体积无关。

常见错误现象：

设了 $enable-carousel: false，但构建后 CSS 里仍有 .carousel、.carousel-inner 等选择器
Lighthouse 报告未使用 CSS >65%，但你页面里确实只用了 btn 和 container

正确做法：新建自定义 Sass 入口文件

删掉所有对 bootstrap/scss/bootstrap 的 @import，新建 src/custom-bootstrap.scss，严格按顺序导入基础依赖 + 明确需要的组件：

VPS Bootstrap

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

下载

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/grid";

注意：

顺序不能错，functions 必须第一，variables 第二，mixins 第三；否则编译报错（如 Undefined variable "$grid-columns"）
root 和 reboot 不能漏，否则 CSS 自定义属性和基础重置失效
不需要的组件（如 modal、tooltip）整行删掉，不是注释

别忽略的三大体积陷阱

即使只导入了 buttons 和 navbar，默认配置仍可能悄悄引入大量冗余 CSS：

print.scss 默认被 bootstrap.scss 引入，含整套打印媒体查询；若不导出 PDF，务必在自定义入口中跳过它
utilities 是最大头，_spacing.scss 基于 $spacers 生成几十个 mt-1～mb-5 类；可精简 $spacers 或直接注释掉整段 @import
$grid-breakpoints 若保留全部 (xs, sm, md, lg, xl, xxl)，哪怕你只用 col-6，每个断点都会生成一遍规则；可改为仅 (xs: 0) 来彻底剔除媒体查询