根本原因是bootstrap.min.css仅删空格注释而不删未用功能代码，所有组件、深色模式规则、全断点工具类、ie兼容polyfill等均完整保留；真正减负须改sass源码按需导入模块并精简$grid-breakpoints与$utilities。
Bootstrap 5 的 CSS 打包体积大，根本原因不是压缩没做好，而是你打包了根本没用的代码——bootstrap.min.css 只删空格，不删功能。
为什么 bootstrap.min.css 压缩后仍有 70KB？
它只是把 bootstrap.css 里的换行、空格、注释去掉，所有组件样式全在：哪怕你只写了 <button class="btn"></button>，.carousel 的动画帧、.offcanvas 的 transform 偏移、.popover 的 z-index 层叠规则，照样进打包产物。
常见膨胀点包括：
-
[data-bs-theme="dark"]开头的所有深色模式规则，即使 HTML 根节点没加该属性 - 表单伪类链：
:valid、:invalid、:user-invalid、[aria-invalid]全部保留 - 每个断点（
xs/sm/md/lg/xl）下重复生成mt-3、mb-4等间距类，每条都是一条独立声明 -
:focus-visible和:focus-within的 polyfill 规则，主要为 IE11 准备，现代项目基本不用
如何用 Sass 按需编译真正减小体积？
别碰 bootstrap.min.css，直接改构建源头。新建 src/custom-bootstrap.scss，严格按顺序导入：
@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/mixins";- 只加你真用的组件，比如：
@import "bootstrap/scss/buttons";、@import "bootstrap/scss/grid";、@import "bootstrap/scss/container"; - 彻底跳过
@import "bootstrap/scss/modal";、@import "bootstrap/scss/tooltip";等未使用模块
关键动作：
- 删掉所有对
bootstrap/dist/css/bootstrap.min.css或@import "bootstrap/scss/bootstrap"的引用 - 精简
$grid-breakpoints，例如只留(xs: 0, md: 768px)，避免为xl和xxl生成多余媒体查询 - 重写
$utilities，注释掉整组不用的 utility，如shadow、border、position
为什么 PurgeCSS 对 bootstrap.min.css 基本无效？
它只扫描源码中「静态写死」的类名字符串，但 Bootstrap 5 的关键行为靠 data-bs-toggle、data-bs-dismiss 等属性触发，JS 动态拼接的类（如 element.className = 'btn btn-' + type）和模板条件渲染的 utility 类（如 v-if="show" class="d-block d-md-none"）根本不会被识别。
结果就是：PurgeCSS 扫一圈，发现 .btn「没用过」，却把真正生效的 .dropdown-menu、.visually-hidden 全删了——本地正常，上线后下拉菜单打不开、模态框点不亮。
正确做法是：先用 Sass 按需编译出最小 CSS，再让 PurgeCSS 扫你自己的输出文件；若必须启用，content 字段要覆盖 ./src/**/*.{html,js,ts,jsx,tsx,vue}，且 defaultExtractor 必须显式匹配 data-bs-[a-z-]+。
最常被跳过的一步：忘了删 print.scss。它默认被 bootstrap.scss 引入，含大量打印专用媒体查询，如果你不做 PDF 导出，这一块白占 3–5KB。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
