purgecss对bootstrap基本无效，因其仅静态扫描源码中显式出现的类名，而bootstrap大量依赖data-bs-*属性、js动态拼接、框架模板条件渲染及@extend复合选择器，导致真实使用的类名无法被识别；必须放弃后处理bootstrap.min.css，改用sass按需导入并配置content路径与safelist。
PurgeCSS 对 Bootstrap 基本无效，直接在 bootstrap.min.css 上跑它，几乎删不掉几行——它根本没机会看到 Bootstrap 真正在用的类。
为什么 PurgeCSS 扫不到 Bootstrap 的真实类名
它只静态扫描你源码里「显式写死」的类名，但 Bootstrap 大量依赖：
-
data-bs-toggle="modal"这类属性触发的样式，PurgeCSS 不解析 JS 行为，也看不到对应 CSS 选择器 -
element.className = 'btn btn-' + type这种字符串拼接，静态分析直接漏掉btn-primary、mb-3等 - Vue/React 模板中
class="d-flex {{ isActive ? 'd-none' : '' }}"或className={clsx('btn', `btn-${variant}`)}，默认content配置扫不到 -
@extend生成的复合选择器（如.btn.btn-outline-success）可能被误判为未使用
真正有效的裁剪路径：从 Sass 源头控制
放弃后处理打包好的 CSS，改用官方支持、可预测的按需编译方式：
- 彻底删除
@import "bootstrap/scss/bootstrap"或import 'bootstrap/dist/css/bootstrap.min.css' - 在
main.scss中显式导入链：@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→@import "bootstrap/scss/mixins"→ 再按需加@import "bootstrap/scss/grid"、@import "bootstrap/scss/buttons" - 注释掉所有不用的组件：
// @import "bootstrap/scss/modal"、// @import "bootstrap/scss/tooltip" - 构建后用文本搜索检查最终 CSS 是否含
.carousel、.offcanvas——如果还有，说明 import 没清理干净，或被其他依赖间接引入
如果你坚持要用 PurgeCSS，必须绕开三个致命坑
它不是不能用，而是必须用对位置、配对范围、保活关键类：
-
content数组必须覆盖所有类名出现的位置：./src/**/*.{html,js,ts,jsx,tsx,vue}，Vue 用户还得配extractors解析<template></template>块 -
safeList不是可选项，是救命项：动态类（bg-${color}）、响应式工具类（d-md-block）、container/row/col等基础栅格类，必须显式写进safeList - 插件顺序不能错：PurgeCSS 必须在
cssnano之前运行（否则压缩合并会破坏原始类名），或至少关掉cssnano的reduceTransforms等激进优化
最常被忽略的点是：PurgeCSS 的输入必须是你自己编译出的 CSS，而不是第三方打包好的 bootstrap.min.css。哪怕只多了一层构建封装，它就大概率失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
