purgecss会删掉sass循环生成的类，是因为它默认仅提取html/jsx/vue中显式出现的字符串字面量类名，无法识别@for/@each动态生成或变量拼接（如mt-${size}、text-#{$name}）的类，必须通过正则safelist（如/^mt-[1-9]|1[0-2]$/、/^(text|bg)-[a-z]+$/）或启用ast解析插件（如purgecss-webpack-plugin的modules: true）主动声明保留。
为什么PurgeCSS会删掉你Sass循环生成的类
不是PurgeCSS故意找茬，而是它根本“看不见”那些类——@for和@each生成的类名（比如.mt-7、.text-warning）如果没在HTML/JSX/Vue模板里以完整字符串形式出现，就不会被提取器捕获。尤其当类名来自map键（如"warning"）或计算拼接（className={`mt-${size}`}），默认正则提取器直接跳过。
常见错误现象：mt-7在编译后CSS里存在，但构建产物中消失；text-success本地正常，部署后文字变黑；Coverage面板显示这些类“未命中”，但你确实在组件里写了。
- 别指望PurgeCSS自动识别
@each $name, $color in $colors生成的.text-#{$name}——除非"success"这个字符串真正在源码里作为字面量出现过 -
@for $i from 1 through 12生成的.mb-12，若HTML中只写了mb-1到mb-4，其余8个全被清掉 - 响应式类如
md:mt-3更危险：PurgeCSS默认不认冒号前缀，md:部分被当普通文本忽略
用safelist精准保留循环生成的类名
白名单不是兜底方案，而是必须主动声明的“许可清单”。靠whitelist: ['mt-1', 'mt-2']手动列太脆弱，推荐用正则匹配模式。
- 对数字序列类（
mt-1到mt-12）：/^mt-[1-9]|1[0-2]$/—— 注意1[0-2]覆盖10~12，避免mt-100误入 - 对map键生成类（
text-primary、bg-warning）：/^(text|bg|border)-[a-z]+$/，但需确保你的map键全是小写字母+连字符（如"dark-blue"合法，"Dark Blue"不行） - 响应式前缀必须显式放行：
/^(sm|md|lg|xl):/，否则md:mt-2整个选择器被当作无效字符串丢弃 - 别漏掉伪类变体：
/:(hover|focus|active|visited)$/, /^group-hover:/，否则hover:bg-red-500直接消失
让PurgeCSS“看见”动态拼接的类名
光靠safelist治标不治本。真正要解决的是提取器能力——让它从JSX/Vue模板里挖出mt-${n}这种结构。
- Webpack用户：改用
purgecss-webpack-plugin并启用modules: true，它基于AST解析，能识别className={`mt-${size}`}中的mt-前缀 - Vite用户：换
vite-plugin-purgecss，它默认启用AST提取，比纯正则可靠得多 - 通用技巧：在JSX里加注释提示PurgeCSS，比如
{/* purgecss start ignore */}className={`mt-${size}`}{/* purgecss end ignore */}，但仅限临时调试 - 绝对路径配置
content：path.join(__dirname, 'src', '**', '*.{js,jsx,ts,tsx,vue}')，避免glob在Windows下路径失效
Sass层配合：减少依赖PurgeCSS兜底
最省心的方式，是让Sass循环本身就不生成多余类——把PurgeCSS当最后一道防线，而不是唯一防线。
- 用
@each $name, $value in $colors代替@for $i from 1 through length($colors)，确保生成的类名与实际使用场景一致 - 间距类别暴力遍历
1 through 12，先查项目里mt-实际出现的最大值，比如只有mt-1~mt-6，就写1 through 6 - 禁用
@for内调用@mixin，否则每个循环项都展开一份副本，PurgeCSS再怎么留也留不住体积膨胀 - 生成前加
@debug "Generating .mt-#{$i}";，结合构建日志确认哪些类真被输出了，再决定safelist范围
真正麻烦的从来不是配置几行正则，而是得同时盯住Sass编译输出、模板中类名出现方式、以及PurgeCSS提取逻辑三者是否对齐——少一个环节，mb-8就悄无声息地从生产环境消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
