Bootstrap按需引入组件 Bootstrap如何减小CSS文件大小-Bootstrap教程-PHP中文网

关键在于按需引入Bootstrap CSS组件而非全量加载。可通过Sass源码按需编译、精简utilities配置、PurgeCSS工具子集化，或避免与组件库重复引入，从而显著减小体积。

只引入用到的Bootstrap CSS组件

bootstrap默认打包全部样式，哪怕你只用了 btn 和 container，也会加载近200kb的css。真正减小体积的关键不是“压缩”，而是“不加载没用的部分”。

官方推荐方式是通过Sass源码按需编译——前提是项目已支持Sass构建流程（如Webpack + sass-loader 或 Vite）。

删掉对 bootstrap/dist/css/bootstrap.min.css 的直接引用
新建自定义Sass文件（如 src/custom-bootstrap.scss）

只 @import 需要的模块，例如：

@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";

确保 bootstrap npm包已安装（npm install bootstrap），且Sass能正确解析 node_modules 路径

避免误引重复或冗余的utility类

Bootstrap 5的utility API（如 mt-3、fw-bold）非常灵活，但全量开启会生成大量CSS规则。如果你只用其中一小部分，却保留了默认的完整 $utilities map，体积就白涨了。

在自定义Sass中重写 $utilities 前，先确认是否真需要所有响应式断点——多数项目其实只用 xs 和 md 就够了。

在引入 utilities 前，覆盖 $grid-breakpoints，比如只留：
```
$grid-breakpoints: (
  xs: 0,
  md: 768px
);
```
删掉不需要的utility组，例如不用阴影就注释掉 shadow 相关项
禁用未使用的状态变体（如 hover、focus）可进一步缩小，但注意：按钮和表单交互依赖这些

CDN引入时无法按需，只能靠子集化工具

如果项目受限于纯HTML + CDN（比如嵌入老系统、邮件模板、静态页面），没法走Sass编译流程，那 bootstrap.min.css 就是唯一选择——但别直接上完整版。

VPS Bootstrap

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

下载

可行方案是用工具提取实际用到的选择器，生成精简CSS。这不是理想方案，但比硬扛200KB现实得多。

用 purgecss 配合HTML文件扫描（purgecss --css bootstrap.min.css --content "*.html"）
注意：它不会识别JS动态插入的class（如 document.body.classList.add('d-none')），得手动加白名单
若连Node环境都没有，可用浏览器插件如 “PurgeCSS Playground” 粘贴HTML+CSS在线试裁剪
裁完务必检查响应式断点是否残留完整媒体查询——有些工具会漏掉 @media 块内的选择器

警惕CSS-in-JS或组件库二次引入Bootstrap

很多UI组件库（如React-Bootstrap、Vue-Bootstrap）内部已封装样式逻辑，若你又单独引入 bootstrap.min.css，就会造成双重加载。

更隐蔽的是：某些图标库（Font Awesome）或旧版弹窗插件（jQuery Modal）会悄悄注入自己的Bootstrap兼容样式，叠加后反而增大体积。

检查 network 面板里是否有多个 bootstrap.*.css 请求
用DevTools的 coverage 功能（Ctrl+Shift+P → “Coverage”）看CSS实际使用率，常发现低于30%
React-Bootstrap用户应禁用其自带CSS：导入时用 import 'react-bootstrap/esm/Button'; 而非 import Button from 'react-bootstrap/Button';（后者可能带样式）

按需引入这事，表面是删几行代码，实际考验你是否清楚自己到底用了哪些class、哪些断点、哪些交互状态。最省事的“引入全量+压缩”方案，在现代前端里基本等于主动放弃控制权。