最省事的起点是彻底移除全量 css 引入；改用 sass 按需导入，仅加载 functions、variables、mixins 及实际使用的组件（如 buttons、grid）；精简 $utilities 和 $grid-breakpoints；删除 _print.scss；purgecss 仅适用于按需编译的 css。
直接删 bootstrap.min.css 是最省事的起点
全量引入 bootstrap.min.css 后，哪怕只用了 container 和 btn，carousel、offcanvas、tooltip 的全部 CSS 规则仍在打包产物里。它只是删了空格和换行，没删功能。你看到的 70KB（gzip 后）是“压扁的整座山”，不是“只留了山尖”。所以第一步永远是：彻底移除所有类似 import 'bootstrap/dist/css/bootstrap.min.css' 或 @import "bootstrap/scss/bootstrap" 的语句。
用 Sass 按需导入，只加真正需要的模块
Bootstrap 的组件样式彼此解耦，每个都在独立文件里（如 _buttons.scss、_navbar.scss）。关键不是“禁用”，而是“不 import”。
- 新建
src/custom-bootstrap.scss，严格按顺序写： @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/grid";、@import "bootstrap/scss/forms";—— 其他全不写
注意：$enable-tooltip: false 这类变量只影响 JS 初始化逻辑，不会删掉 .tooltip 类的 CSS，别指望靠它减体积。
utility 类是体积大头，必须精简 $utilities 配置
默认 utilities 模块贡献 40–60KB（gzip 前），因为它为所有断点、所有间距值、所有阴影等级生成规则。你不用 shadow-5 或 mt-xxl，它们却照常输出。
- 在导入
utilities前，重写$utilities变量，只保留用到的组，例如只留 margin 和 color： $utilities: map-get($utilities, "margin"), map-get($utilities, "color");- 缩小断点范围：
$grid-breakpoints: (xs: 0, md: 768px);，避免为xl、xxl生成媒体查询 - 检查构建后 CSS 文件：搜
.carousel、.offcanvas、.shadow-sm—— 如果还存在，说明对应@import没删干净，或被其他依赖间接引入
PurgeCSS 对 bootstrap.min.css 基本无效
它只能扫描 HTML/JS 中硬编码的类名字符串，但 Bootstrap 5+ 大量依赖 data-bs-toggle、data-bs-dismiss 等属性触发样式，JS 动态拼接类（如 el.classList.add("d-none")）和模板条件渲染（如 v-if="show" class="d-block d-md-none"）根本不会被识别。结果就是：PurgeCSS 扫完，.dropdown-menu 被误删，页面下拉菜单直接失效。
真要用 PurgeCSS，必须作用于你用 Sass 按需编译出的 CSS 文件，而不是 bootstrap.min.css。否则就是在压缩过的二进制上做无用功。
最容易被忽略的一点：print 样式（_print.scss）默认被引入，含大量媒体查询，如果你不做 PDF 导出，这十几 KB 就白占着——直接删掉那行 @import。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
