Vite集成UnoCSS，提升编码效率秘诀
2026-04-15 13:30:48
0浏览
收藏
本文深入解析了在Vite项目中正确集成UnoCSS的关键配置要点与高频踩坑场景，涵盖插件显式启用、@apply指令的手动激活、快捷方式的规范定义以及virtual:uno.css的强制引入等核心步骤，直击“原子类不生效”“@apply报错”“快捷类无效”等典型问题根源，帮助开发者避开配置陷阱、快速落地高效、可定制的原子化CSS开发体验。
UnoCSS插件必须在vite.config.ts中显式启用
不加UnoCSS()插件，哪怕装了包、写了配置，class里写的原子类也不会生效。Vite默认不识别virtual:uno.css，也不扫描模板中的工具类。
常见错误现象：class="text-red-500 p-4"完全没样式，浏览器开发者工具里查不到对应 CSS 规则。
正确做法是确保vite.config.ts的plugins数组中包含：
import UnoCSS from 'unocss/vite' // ... plugins: [ vue(), UnoCSS(), // 必须调用，不能只 import ]
如果你把配置抽到uno.config.ts，记得传入configFile参数：
UnoCSS({
configFile: './uno.config.ts'
})
@apply指令依赖transformerDirectives
@apply不是默认开启的。它属于 UnoCSS 的 transformer 功能，需要手动引入并注册，否则.btn { @apply px-4 py-2 bg-blue-500; }会直接报错或被忽略。
你得在uno.config.ts里明确启用：
- 导入
transformerDirectives（来自unocss） - 把它加进
transformers数组
示例配置片段：
import { defineConfig, presetUno, transformerDirectives } from 'unocss'
export default defineConfig({
presets: [presetUno()],
transformers: [transformerDirectives()] // 关键一行
})
注意：仅在css文件或
