UnoCSS extractor 默认只识别 .html、.vue、.tsx 文件中 class 属性的字面量字符串，如 <div class="m-4 text-blue-600">；动态拼接、插值、注释或 JS 字符串中的类名均无法提取。
UnoCSS 在 HTML 中按需生成 CSS 的核心前提不是“写对 class”，而是“让 extractor 能准确抓到它”——默认情况下，class 属性值必须是静态字符串，动态拼接、变量插值、JS 拼接的 class 都会被漏掉，最终对应规则压根不会进打包产物。
extractor 默认只识别哪些 HTML 内容？
UnoCSS 的 extractor 默认扫描 .html、.vue、.tsx 文件中 class 属性的字面量字符串，比如：
<div class="m-4 text-blue-600"></div>
它能正确提取 m-4 和 text-blue-600。但以下情况全部失效：
-
class="m-4 {{ extraClass }}"（Vue 插值） -
class={"m-4 " + dynamic}（JSX 对象或字符串拼接） -
<div class="text-red-500">调试用文字</div>（出现在注释、JS 字符串、日志里）
这些不会报错，但会导致规则缺失或误注入——体积优化效果直接打折扣。
立即学习“前端免费学习笔记（深入）”；
如何让动态 class 也被提取？
得靠自定义 extractor 或启用 attributify 模式：
- 启用
@unocss/preset-attributify后，可改用属性写法：<div m="4" text="blue-600">，这种语法天然支持部分动态绑定（如m={size}），且 extractor 更容易识别 - 若坚持用
class动态拼接，需在uno.config.ts中扩展 extractor，例如匹配class={dynamicClass}模式，但必须确保变量名可被静态分析（不能是任意运行时计算） - 临时方案：把关键动态 class 列进
safeList，强制生成，比如safeList: ['m-${n}', 'text-${color}-500']（注意这会放宽原子约束，慎用）
HTML 文件没被扫描？检查这几个点
常见原因不是配置错，而是路径或构建流程没覆盖到：
- 确认
content配置里包含 HTML 路径，例如content: ['src/**/*.{html,js,ts,vue}'] - Vite / Webpack 构建时，HTML 如果是通过插件（如
vite-plugin-html）注入的，可能不在默认扫描范围内，需显式加入content - 使用
unocss --inspect启动本地检查服务，打开http://localhost:5000查看实际提取了哪些 class，比猜更可靠
真正卡住人的往往不是配置语法，而是 extractor 和代码写法之间的“信任边界”——它不执行 JS，只做字符串匹配；它不理解 Vue 的响应式逻辑，只认模板字面量。想省体积，先让 class “看得见”。
