purgecss直接处理bootstrap.min.css基本无效，因其仅匹配源码中字面出现的类名，而该文件是预编译产物，且bootstrap类常由js动态拼接或框架运行时注入，导致扫描不到；必须作用于sass按需编译生成的css，并严格配置content路径与safelist。
PurgeCSS 直接处理 bootstrap.min.css 基本无效，必须作用于你编译生成的 CSS，且扫描范围要覆盖所有类名来源。
为什么 PurgeCSS 扫了 bootstrap.min.css 却几乎不删代码
因为 PurgeCSS 只匹配「源码中字面出现过的类名」，而 bootstrap.min.css 是预编译产物，里面的选择器（如 .btn、.d-none）在你的 HTML/JSX 中很可能没以完整字符串形式出现——比如被 JS 拼接：className={`d-${show ? 'block' : 'none'}`}，或由 Vue 的 v-bind:class 动态注入。PurgeCSS 默认根本扫不到这些。
常见错误现象：
- 构建后 CSS 体积无变化，Lighthouse 仍报 “unused CSS”
- 本地开发正常，部署后
.d-md-flex等响应式类突然失效 - 模态框、下拉菜单等组件样式错乱，但 HTML 里明明写了
class="modal"
根本问题不在 PurgeCSS 本身，而在它被喂错了输入：它该清理的是你 main.scss 编译出来的 CSS，不是第三方打包好的压缩文件。
必须改用 Sass 按需导入，再配 PurgeCSS
先停用全量引入，否则 PurgeCSS 再怎么调也救不回来。正确路径是：从源头裁剪 + 构建时扫描。
操作步骤：
- 删掉
main.scss里类似@import "bootstrap/scss/bootstrap";这种全量语句 - 改用显式链式导入：
@import "bootstrap/scss/functions";→@import "bootstrap/scss/variables";→@import "bootstrap/scss/mixins";→ 再按需加@import "bootstrap/scss/grid";、@import "bootstrap/scss/buttons"; - 把确定不用的组件（如
carousel、tooltip、popovers）对应@import全部注释或删除 - 确保最终编译出的 CSS 文件（如
dist/css/app.css）才是 PurgeCSS 的--css输入目标
PostCSS 配置里 content 和 safeList 是生死线
content 不写全，PurgeCSS 就像蒙眼扫雷；safeList 不设好，动态类一删就崩。
关键配置项（以 postcss.config.js 为例）：
-
content必须覆盖所有类名出现位置：['./src/**/*.{html,js,ts,jsx,tsx,vue}']—— Vue 用户要额外加extractors处理<template></template>块，React 用户必须包含.tsx和.jsx -
defaultExtractor要兼容短横线和驼峰：/[\w-/:]+(?![^)/g或更稳妥的正则，否则bg-blue-500、is-active会被漏掉 -
safeList不是可选项，是保命项：[/^d-/, /^flex-/, /^justify-/, /^text-/, /^bg-/, /^border-/]，Bootstrap 的响应式工具类（如d-md-block）全靠它活下来 - 启用
keyframes: true和fontFace: true，否则@keyframes spin和自定义字体规则可能被误删
插件顺序错一位，整个 PurgeCSS 就白配
PurgeCSS 必须在 autoprefixer 之后、cssnano 之前运行，否则类名可能被重写或合并，导致匹配失败。
错误顺序（后果严重）：
autoprefixer → cssnano → purgecss
cssnano 可能把 .btn, .btn-primary { ... } 合并成 .btn.btn-primary，原始类名消失，PurgeCSS 扫不到。
推荐顺序：
autoprefixer → purgecss → cssnano（但需关掉 cssnano 的 reduceTransforms 等激进压缩）
Webpack 用户额外注意：mini-css-extract-plugin 输出的 CSS 路径必须与 purgecss.content 中的 glob 模式严格一致，少一个 src/ 或多一个 ** 都会导致漏扫。
真正容易被忽略的点是：Bootstrap 5 的 data-bs-* 属性本身不参与样式匹配，但如果你写了 [data-bs-toggle="modal"] { cursor: pointer; } 这种自定义规则，就必须把 data-bs-toggle 加进 safeList，否则连带样式一起清空——而 JS 功能也会因属性丢失直接瘫痪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
