根本原因是UnoCSS extractor仅提取HTML中class属性的静态字面量字符串，不解析JS动态拼接、Vue插值、注释或JS字符串内的类名；若未在content配置中包含HTML路径或类名写法越界，extractor就无法捕获，导致inspect中Extracted列表为空或缺失。
打开 unocss --inspect 服务后看不到预期 class
根本原因不是 Inspect 工具失效，而是 extractor 根本没提取到那些 class——它只扫描静态字面量，不执行 JS、不解析 Vue 插值、不读注释。你看到的空白或缺失列表，其实是“代码写法越界”发出的静默警告。
实操建议：
- 运行
unocss --inspect前，先确认content配置已包含 HTML 路径，例如content: ['src/**/*.{html,ts,vue}'] - 访问
http://localhost:5000后，重点看「Extracted」标签页里列出的 class，不是「Generated」——后者是全部规则，前者才是实际被扫描到的 - 如果某个 class（如
text-red-500）在 HTML 中写在 JS 字符串里：console.log('text-red-500')，它不会出现在 Extracted 列表中，也不该出现 - 检查右上角显示的扫描文件数，若为 0 或明显偏少，说明路径配置或构建流程漏掉了目标文件（比如 Vite 插件生成的 HTML 没被纳入）
class 是动态拼接的，但 Inspect 显示“未提取”，怎么补救？
UnoCSS 不会运行你的组件逻辑，所以 class={\`m-\${size} text-\${color}-500\`} 这类写法默认零匹配。Inspect 只反映现状，不提供修复，得改代码或配 extractor。
可选路径：
立即学习“前端免费学习笔记（深入）”；
- 启用
@unocss/preset-attributify，改用属性语法：<div m="4" text="blue-600">，这种写法 extractor 天然能识别变量绑定（如m={size}） - 在
uno.config.ts的extractor选项中扩展正则，例如匹配class={dynamicClass}，但前提是变量名必须可静态推导（不能是getClassName()这种调用） - 临时加
safeList：比如safeList: ['m-${n}', 'text-${color}-500']，注意这会让所有m-1到m-99全部打进 CSS，体积代价明确
Inspect 页面显示 class 已提取，但页面没生效
说明 extractor “看见了”，但样式没注入——常见于插件注册顺序或模块解析失败。
重点排查点：
- 确认
vite.config.ts中Unocss()插件位于css相关插件（如vite-plugin-css-injected-by-js）之前，否则虚拟模块virtual:uno.css可能被拦截 - 检查浏览器控制台是否报
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain"，这是virtual:uno.css未被正确解析的典型信号 - 确保项目入口（如
main.ts）已导入uno.css：import 'uno.css'，且该语句未被条件编译剔除 - 清除
node_modules/.vite和dist目录后重试，旧缓存常导致模块解析状态错乱
为什么 inspect 里 class 有重复或带奇怪后缀？
那是 UnoCSS 在不同模式（global、vue-scoped、shadow-dom）下自动添加的作用域标识，不是 bug。例如 text-red-500_123abc 表示该规则被 scoped 模式处理过。
影响与应对：
- 重复出现通常是因为同一 class 在多个文件中被提取，或
shortcuts和原子规则同时命中——Inspect 不去重，它只忠实反映 extractor 输入 - 带哈希后缀不影响运行时效果，但若你在 JS 中手动查 DOM 类名（如
el.classList.contains('text-red-500')），需注意 scoped 模式下真实类名已变化 - 不想加后缀？把
rules或shortcuts写进presets并设prefix: ''，或直接用mode: 'global'（仅限纯 HTML 场景）
class 属性里。 
