Vite集成UnoCSS，提升编码效率秘诀

本文深入解析了在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文件或