purgecss默认不处理import的第三方css，因其仅静态扫描content配置中源码里的字符串字面量类名，而import语句和node_modules中css文件本身不含可提取类名，必须通过safelist手动保留实际使用的类。
直接说结论：PurgeCSS 默认根本不会处理你 import 进来的第三方 CSS（比如 node_modules/bootstrap/dist/css/bootstrap.css），它只认你在项目源码里“写死”的类名字符串。想让它起作用，必须手动告诉它哪些类该留着。
为什么 import 的 CSS 几乎不被 PurgeCSS 扫描
PurgeCSS 的工作方式是静态分析——它读取你配置的 content 文件（如 src/**/*.html、src/**/*.vue），从中提取所有出现的类名、ID、标签等选择器字面量，再和 CSS 文件里的规则逐一对比。而 import 'bootstrap' 这种语句本身不包含任何可提取的类名，它只是模块引用；node_modules 里的 CSS 文件也不会自动进入扫描范围，除非你显式加进 css 参数，但那也没用——因为没对应类名在 content 里出现，整条规则照样被删。
- 常见现象：
.btn看似还在，但体积只少了不到 5%，说明 PurgeCSS 压根没识别出哪些该删 - Tailwind 的
hover:bg-blue-500不会自动匹配，除非你在模板里写了class="hover:bg-blue-500" - 运行时拼接的类名（如
className={`btn ${type}-btn`}）会被漏掉，因为type是变量，不是字符串字面量
让引入的 CSS 被正确处理的三个关键操作
你不能指望 PurgeCSS 自动推断用了哪些组件，必须主动“喂”信息：
-
必须配
safelist：用正则或字符串列出你实际用到的类前缀或全名。例如 Bootstrap 可写[/^btn-/, /^alert-/, /^modal-/]；Ant Design 写['ant-btn', 'ant-table'] -
确保
content覆盖真实使用场景：不只是 HTML，还要包括src/**/*.js、src/**/*.vue、src/**/*.tsx；若用 Pug/Blade/Nunjucks，也得加进去 -
禁用危险选项：
fontFace: true和keyframes: true容易误删第三方库的动画和字体声明，除非你确认自己管理这些资源，否则别开
PostCSS 插件中 content 配置的典型陷阱
很多人以为 content: ['node_modules/**/*'] 就能扫出 Bootstrap 的类名——这是错的。PurgeCSS 不解析 JS 模块 AST，也不读取 CSS 文件内容来反向推导类名，它只从你指定的文件里提取字符串字面量。
- 错误写法：
content: ['node_modules/bootstrap/dist/css/bootstrap.css']→ 无意义，里面没有class="btn"这样的字符串 - 正确思路：把 Bootstrap 组件的使用位置写进
content，比如src/pages/Home.vue里真写了<button class="btn btn-primary"></button>，它才会被识别 - Vue 项目要特别注意：单文件组件的
<template></template>部分必须在contentglob 范围内，否则class="xxx"不会被提取
最常被忽略的一点：safelist 正则必须能真正匹配到你源码中出现的字符串。比如 Tailwind 的 bg-red-500，如果源码里只写了 class="bg-red-500 hover:bg-red-600"，而你 safelist 只写了 /^bg-/，那 hover:bg-red-600 依然会被删——因为它生成的选择器是 .hover\:bg-red-600，需要额外匹配 /^hover\:/ 或启用 variants 配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
