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对应的样式，模态框就关不掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
