purgecss无法扫描bootstrap类名，因其仅提取html/js中字面量类名，而bootstrap的data-bs-*属性、动态拼接类名及sass编译产物均不在扫描范围内，需改用sass按需导入并配置safelist和精确content路径。
PostCSS 本身不清理 CSS，真正干活的是 @fullhuman/postcss-purgecss 插件；但直接对 bootstrap.min.css 运行它基本无效——因为 Bootstrap 类名大多不出现在你的 HTML/JS 源码里。
为什么 PurgeCSS 扫不到 Bootstrap 的类
PurgeCSS 默认只扫描 .html 和 .js 文件中「字面量写出的类名」，而 Bootstrap 5 的实际使用场景远不止这些：
-
data-bs-toggle、data-bs-target这类属性不生成 CSS 选择器，PurgeCSS 不关心，但你自定义的[data-bs-toggle="modal"]规则会被误删（需进safelist） - Vue 中的
v-if="show" class="d-none"、React 的className={`btn btn-${type}`}，字符串拼接和模板语法让类名无法被静态提取 - Sass
@extend生成的复合选择器（如.btn.btn-outline-primary）在源码中根本没出现过 - 服务端渲染或动态挂载的组件，HTML 在构建时还不存在
必须走 Sass 源码编译链路
放弃 import 'bootstrap/dist/css/bootstrap.min.css'，改用 Sass 按需导入，这是唯一可控的起点：
- 新建
src/styles.scss，按顺序导入：@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→@import "bootstrap/scss/mixins" - 只加真正用到的模块：
@import "bootstrap/scss/grid"、@import "bootstrap/scss/buttons"，跳过modal、carousel等未用组件 - 确认构建工具把
.scss编译后输出的 CSS 真进了 PostCSS 流程：Webpack 中css-loader的importLoaders: 1必须设好；Vite 则要删掉vite.config.js里的css.postcss字段，否则会屏蔽默认配置
PostCSS 插件顺序与 safelist 配置要点
插件顺序错一位，就可能清空全部样式或完全失效：
- 正确顺序：
postcss-import→tailwindcss（如有）→@fullhuman/postcss-purgecss→autoprefixer→cssnano -
cssnano必须关掉discardUnused：{ discardUnused: false }，否则和 PurgeCSS 重复工作，可能二次误删 -
safelist不是可选项，是保命项：['data-bs-*', /btn-/, /bg-.+/, /text-.+/]——Bootstrap 的动态类（如bg-gradient、text-capitalize）全靠它兜底 -
content数组必须覆盖所有模板路径：./src/**/*.{html,vue,jsx,tsx,ts}，Vue 单文件组件尤其不能漏.vue
验证是否真生效的三个硬检查点
别只看文件体积缩小了多少，重点查这三处：
- 构建后打开最终 CSS 文件，搜
.carousel、.offcanvas—— 如果还存在，说明@import没清理干净，或被其他依赖（比如某个 UI 库）间接引入了 - 运行
npx autoprefixer --info，确认gap、backdrop-filter等属性是否被标记为「需要前缀」，避免 browserslist 配置太宽泛导致前缀缺失 - 本地起服务，打开 DevTools → Elements，随机点一个用了
.d-md-flex的元素，看对应规则是否还在样式面板里；如果没了，大概率是defaultExtractor没适配响应式类中的短横线+括号结构
最常被忽略的其实是 content 路径匹配精度和 safelist 的正则覆盖范围——写 /^d-/ 会漏掉 d-md-block，而 /d-.+/ 又太宽，得用 /d-(sm|md|lg|xl|xxl)-.+/ 这种显式枚举才稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
