unocss默认不扫描字符串拼接类名，因其依赖静态分析提取写死在模板或jsx中的字面量类名，变量插值、模板字符串、运行时js操作及未纳入content.filesystem配置的外部文件中的类名均无法被识别。
UnoCSS默认不扫描字符串拼接类名
UnoCSS按需生成样式，依赖静态分析提取类名。它只识别写死在模板或 JSX 中的字面量类名，比如 class="text-red bg-blue"；一旦类名来自变量、模板字符串或函数调用，就无法被提取器捕获。
常见失效写法包括：
class={`${baseClass} ${isActive ? 'text-blue' : 'text-gray'}`-
:class="['text-sm', isActive && 'font-bold']"（Vue响应式数组） -
className={`p-${size} rounded`}（React中变量插值） -
el.classList.add('hover:bg-black')（运行时 JS 操作）
这些都不是静态字符串，UnoCSS 的提取器（如 DefaultExtractor）在构建时根本看不到完整类名，自然不会生成对应 CSS。
content.filesystem 配置未覆盖动态类名来源文件
即使你把类名写成字符串，如果它出现在 UnoCSS 未配置扫描的路径下，依然不会被识别。比如工具函数里定义的类名常量、JSON 配置、i18n 语言包等。
必须显式把这类文件加入 content.filesystem 列表：
- 工具函数：
src/utils/classes.ts - 配置对象：
src/config/theme.ts - JSON 数据：
src/data/buttons.json
否则，text-red 写在 buttons.json 里，UnoCSS 就当它不存在。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
没启用 transformer-directives 或自定义 extractor
UnoCSS 提供了两种补救方式，但需要主动开启：
-
@unocss/transformer-directives可识别v-uno指令中的类名，适合 Vue 场景； - 自定义
extractor能解析特定格式的字符串，比如匹配/\b(text-\w+|bg-\w+)\b/g； - 但注意：正则提取有风险——可能误提非样式字符串，且无法处理条件逻辑（如
isActive ? 'text-blue' : 'text-gray'）。
启用示例：
import transformerDirectives from '@unocss/transformer-directives'
export default defineConfig({
transformers: [transformerDirectives()],
})
动态类名本质是运行时行为，UnoCSS 是编译时工具
这是最根本的限制：UnoCSS 在构建阶段工作，而字符串拼接、三元判断、数组合并都发生在浏览器里。它没法预知 isActive 是 true 还是 false，也就没法决定是否生成 text-blue 的 CSS。
可行的折中方案只有两个：
- 把所有可能用到的类名提前写死在某个可见位置（比如隐藏 div），让提取器“看见”它们；
- 改用
unsafe规则或attributify模式，把类名转为属性（如uno-text="red"），再配 extractor 提取。
别指望靠配置绕过这个边界——动态性与按需生成天然冲突，强行混合只会增加不可控的体积和维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
