PurgeCSS 直接处理 bootstrap.min.css 几乎无效，因其仅静态扫描源码中写死的类名字符串（如 class="btn"），不解析 import 语句、不读取 node_modules 中 CSS 文件，必须配合 Sass 按需导入、精准 content 配置和 safelist 正则兜底。
直接对 bootstrap.min.css 运行 PurgeCSS 几乎无效——它不解析 import 语句，也不读取 node_modules 中的 CSS 文件，只扫描你源码里写死的类名字符串。真要自动化清理，得把它塞进 Sass 编译流程前端，且 content 和 safelist 必须精准覆盖动态类来源。
content 配置必须覆盖所有类名实际出现的位置
PurgeCSS 不会从 bootstrap.min.css 里反推哪些类该留，它只看你 content 列表里文件中是否出现了 class="btn btn-primary" 这样的字面量。
- 必须包含所有模板/组件路径：
['src/**/*.html', 'src/**/*.vue', 'src/**/*.tsx', 'src/**/*.js']，JSX 中的className、Vue 的v-bind:class、甚至 JS 模板字符串里的`class="${base}-active"`都得扫到 - 别加
node_modules/**/*.css——PurgeCSS 不解析 CSS 文件内容，加了等于没加 - 若项目有 SSR 渲染输出的 HTML（如
dist/ssr/*.html），也得放进content，否则data-bs-toggle="modal"对应的类可能被误删 - Windows 下避免用
glob.sync('./src/**/*.vue')，路径分隔符易错，改用path.join(__dirname, 'src', '**', '*.{vue,ts,js}')
safelist 是 Bootstrap 项目存活的底线配置
Bootstrap 大量使用响应式工具类（.d-md-block）、状态类（.is-invalid）、data 属性钩子（data-bs-*）和 JS 动态拼接逻辑，静态扫描根本抓不住——全靠 safelist 拦住误删。
- 正则比列全名更可靠：
[/^btn-/, /^alert-/, /^modal-/, /^d-/, /^text-/]覆盖大部分工具类 - Tailwind 变体必须显式保：
[/^(hover|focus|active|group-hover)-/, /\[.*\]/]，否则hover:bg-blue-500和[data-open="true"]全丢 - 第三方图标或字体类（如
.bi bi-x）需手动加进数组：['bi', 'bi-x', 'fa-solid'] -
safelist匹配的是完整选择器，.btn-primary和btn-primary效果不同，优先写带点的
PostCSS 插件顺序错一位，CSS 就可能全空
插件执行顺序直接影响 PurgeCSS 能否拿到正确的选择器形态。比如 .btn:-webkit-appearance 这种前缀版本，如果 @fullhuman/postcss-purgecss 在 autoprefixer 前运行，就匹配不到原始类名。
- 正确顺序必须是：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano必须关掉discardUnused: { discardUnused: false }，否则它会二次扫描并清掉 PurgeCSS 已保留的规则 - 若同时启用了
tailwind.config.js的content和外部@fullhuman/postcss-purgecss，二者功能重叠，冲突概率极高 - 构建后 CSS 文件只剩
@charset "UTF-8";或 Lighthouse 显示 “CSS 规则数为 0”，基本就是顺序或cssnano配置错了
别指望 PurgeCSS 替代 Sass 按需导入
PurgeCSS 是最后一道过滤网，不是源头裁剪工具。它删不掉 @import "bootstrap/scss/modal" 编译出来的整块 CSS，哪怕你压根没用 Modal 组件。
- 真正减体积的起点是：在主 SCSS 文件中显式导入所需模块，彻底避免
@import "bootstrap/scss/bootstrap" - 禁用未用组件不止于 CSS：
$enable-gradients: false、$enable-shadows: false等变量要在 Sass 编译前设好 - JS 端也要按需导入：
import { Modal } from 'bootstrap/js/dist/modal'，而非全量bootstrap.bundle.js - 构建后用
grep -r "carousel" dist/assets/css/验证残留——有就说明某处偷偷引入了 carousel 相关文件
最常被忽略的点是：PurgeCSS 的 defaultExtractor 默认不识别括号内内容（如 [data-bs-toggle="modal"]）和驼峰命名（如 className="isDisabled"），需要自定义提取器或靠 safelist 补漏。没有这层兜底，哪怕配置全对，交互样式也可能突然消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
