PurgeCSS对Bootstrap无效是因为它无法识别JS拼接类名、data属性、条件渲染及Sass @extend生成的选择器;应改用Sass按需导入并严格配置PostCSS插件顺序与safelist。

为什么直接在import 'bootstrap/dist/css/bootstrap.min.css'后跑PurgeCSS基本没用
PurgeCSS只扫描源码中「显式写出的字符串」,而Bootstrap大量依赖:data-bs-toggle属性触发、element.className = 'btn btn-' + type这类JS拼接、模板条件渲染(如v-if="show" class="d-none")、以及Sass @extend生成的复合选择器(如.btn.btn-outline-primary)。这些类名在HTML或JS源文件里根本不存在,PurgeCSS静态扫描自然漏光。
常见错误现象:purgecss运行完,.modal还在,.visually-hidden也被留着,但体积只少了不到5%,说明它压根没识别出哪些该删。
- 放弃在构建后处理
bootstrap.min.css,改用Sass按需导入:只@import "bootstrap/scss/buttons"、@import "bootstrap/scss/grid"等实际用到的模块 - 禁用未用组件:注释掉
@import "bootstrap/scss/modal"、@import "bootstrap/scss/tooltip" - 构建后用文本搜索验证最终CSS是否含
.carousel或.offcanvas——如果还有,说明import没清理干净,或被其他依赖间接引入
PostCSS中@fullhuman/postcss-purgecss必须放在cssnano之前
插件顺序错位会导致CSS全空或白屏。典型表现:构建后CSS文件只剩@charset "UTF-8";,或Lighthouse显示“CSS规则数为0”。
根本原因:cssnano若在@fullhuman/postcss-purgecss之前运行,会提前合并/重写选择器;若@fullhuman/postcss-purgecss又放在autoprefixer前面,则.btn:-webkit-appearance这类带前缀的选择器无法匹配,直接漏删。
立即学习“前端免费学习笔记(深入)”;
- PostCSS插件顺序必须严格为:
postcss-import→tailwindcss(如有)→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano配置中必须关掉discardUnused: { discardUnused: false },否则和PurgeCSS重复干活,可能二次误删 - 若项目用了
vite-plugin-css-injected-by-js这类JS注入CSS的方案,它的输出不在content范围内,会被清空——得手动加进content数组,或禁用该插件
动态类名、Tailwind变体和属性选择器必须进safelist
默认提取器只认单词边界匹配,hover:bg-blue-500里的hover:会被截断,[data-state=open]和[&_svg]这种语法也容易被忽略,结果就是交互失效、图标消失、状态样式丢失。
- 在
safelist中加正则:/^(hover|focus|group-hover|data)-/、/\[.*\]/ - 启用
keyframes: true和fontFace: true,否则@keyframes和@font-face可能被连带清除 - Tailwind项目别额外装
@fullhuman/postcss-purgecss——它和tailwindcss内置Purge功能冲突,删掉postcss.config.js里多余的purgecss插件
Webpack中PurgeCSSPlugin扫不到.vue/.tsx里的动态class
插件运行在vue-loader或@babel/preset-react处理前,读到的是原始模板文本:class="btn {{ type }}-btn"或className={`modal ${isOpen ? 'is-open' : ''}`,根本提取不出is-open这种运行时拼接的类。
- 改用绝对路径扫描编译后产物,例如
path.join(__dirname, 'dist', '**', '*.js'),前提是关闭devtool: 'source-map'(否则source map会干扰匹配) - 更稳妥的做法:启用
modules: true选项(purgecss-webpack-plugin支持AST解析),或直接迁移到vite-plugin-purgecss(Vite项目) - Windows下硬写
./src/**/*.vue会失效,必须用path.join(__dirname, 'src', '**', '*.{js,vue,ts}')
data-bs-dismiss对应的样式,模态框就关不掉。


















