直接对 bootstrap.min.css 运行 PurgeCSS 基本无效，因其仅扫描 content 配置路径中的字符串类名，无法识别 JS 动态拼接、data-bs-* 属性、框架条件渲染等非字面量类名，且不解析 node_modules 中的 CSS 文件。
为什么直接对 bootstrap.min.css 跑 PurgeCSS 基本无效
PurgeCSS 不会解析 import 'bootstrap/dist/css/bootstrap.min.css' 这类语句，也不读取 node_modules 里的 CSS 文件内容。它只从你配置的 content 路径里提取字符串字面量类名（比如 class="btn btn-primary"），再和 CSS 规则比对。而 Bootstrap 的类名大量出现在 JS 动态拼接、data-bs-* 属性、Vue/React 条件渲染中——这些在源码里不是固定字符串，静态扫描直接漏掉。
常见表现：.modal 和 .visually-hidden 没被删，但整体 CSS 体积只降了不到 5%，说明 PurgeCSS 根本没识别出多少“可用类”。
- 别把
node_modules/**/*.css加进content：PurgeCSS 不解析 CSS 文件内容，加了也白加 - 别指望它自动推断你用了 Modal 组件：它不知道
new bootstrap.Modal()对应哪些类 -
cssnano若放在@fullhuman/postcss-purgecss前面，会提前重写选择器（如合并.btn, .btn-primary），导致 PurgeCSS 匹配失败
必须用 Sass 按需导入，而不是后期“救火”
真正减体积的起点不是 PurgeCSS，而是不引入不需要的 CSS。Bootstrap 的 SCSS 源码是模块化的，@import "bootstrap/scss/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/grid"; @import "bootstrap/scss/buttons"; // @import "bootstrap/scss/modal"; // 不用就注释掉 // @import "bootstrap/scss/tooltip"; // 同上
- 构建后用
grep -r "carousel" dist/assets/css/验证是否残留：有就说明某处偷偷引入了 carousel 相关文件 - 禁用未用组件不止于 CSS：JS 端也要按需导入，比如只
import Modal from 'bootstrap/js/dist/modal' - 确保
$enable-*变量设为false（如$enable-gradients: false），否则相关 CSS 仍会编译进来
safelist 不是可选配置，而是 Bootstrap 生存必需
即使你已按需导入 SCSS，PurgeCSS 仍会误删大量类——因为 Bootstrap 的响应式工具类（如 .d-md-block）、状态类（.btn-hover）、伪类变体（.btn:focus）不会在模板里完整写出，必须靠 safelist 显式保留。
典型配置示例（PostCSS 插件中）：
safelist: [ /^btn-/, /^alert-/, /^modal-/, /^d-[a-z]/, /^flex-/, /^text-/, /^bg-/, /-(sm|md|lg|xl)-/, /:focus/, /:hover/ ]
- 正则必须覆盖所有可能生成的类名，比如
/^d-[a-z]/才能匹配d-md-flex、d-none - 不要写
'd-md-block'这种精确字符串：一旦你改用d-lg-block，它就失效了 - 若项目用了
data-bs-toggle="modal"，记得加'[data-bs-toggle]'到safelist，否则相关样式会被清空
PostCSS 插件顺序和 extractor 是成败关键
PurgeCSS 必须作用于你最终编译出的 CSS，且要能识别 JSX/TSX/Vue 中的动态类名。插件顺序错一位，结果就是白屏或 CSS 全空。
正确顺序（postcss.config.js）：
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'), // 如有
require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.{html,js,ts,jsx,tsx,vue}'],
defaultExtractor: content => {
const regex = /[A-Za-z0-9-_:/]+/g;
return content.match(regex) || [];
},
safelist: [/* ... */],
keyframes: true,
fontFace: true
}),
require('autoprefixer'),
require('cssnano')({ discardUnused: false })
]
};
-
defaultExtractor必须支持冒号和斜杠，否则hover:bg-blue-500或[data-state=open]会被截断 -
keyframes: true和fontFace: true必须开启：Bootstrap 的动画和字体声明依赖这些规则 -
cssnano的discardUnused: false必须关闭，否则和 PurgeCSS 重复清理，可能二次误删
PurgeCSS 在 Bootstrap 项目里从来不是“开箱即用”的工具，它的效果完全取决于你是否切断了全量引入路径、是否覆盖了所有运行时生成类名的模式、以及是否让插件在正确的构建阶段介入。最容易被忽略的点是：safelist 正则没写全，或者 extractor 没适配属性选择器语法——这两处一漏，样式就随机消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
