unocss 样式不生效主因是类名未被扫描、未生成或未注入/未匹配；需检查 main.ts 是否引入 'uno.css'、content 路径是否覆盖 .ts 文件、是否启用 vue-scoped 模式及 vscode 提示配置。
UnoCSS 在 Vue 3 项目中样式“不生效”，90% 的情况不是引擎坏了，而是类名根本没被扫描到、没被生成，或者生成了但没注入/没匹配上。先确认是不是这三类问题之一，再动手改。
检查 uno.css 是否在入口文件中正确引入
UnoCSS 不像传统 CSS 那样自动收集所有类名——它靠构建时静态扫描 + 运行时注入。如果入口文件（通常是 src/main.ts）里没显式 import 'uno.css'，整个样式系统就启动不了。
- 打开
src/main.ts，确认顶部有这一行：import 'uno.css' - 如果用的是 Vite，且配置了
content路径但漏掉了.ts文件，main.ts里的 import 可能被忽略——建议把content设为['src/**/*.{vue,ts,js}'] - 若使用了
unocss/vite插件但没配enforce: 'pre'，Vite 可能先处理其他插件（比如 Vue 插件），导致uno.css没被识别为 CSS 模块而跳过注入
动态类名（如 :class="`text-${color}`"）不生效的典型原因
UnoCSS 默认只提取代码中**字面量出现**的类名，text-red 会被捕获，text-${color} 则完全不可见——构建阶段变量还没值，扫描器看到的是字符串模板，不是具体类名。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章