如何在Vite中集成UnoCSS并开启预设指令_通过CSS快捷方式大幅提升编码速度-css教程-PHP中文网

unocss插件必须在vite.config.ts的plugins数组中显式调用unocss()，否则原子类不生效；@apply需通过transformerdirectives启用；shortcuts须定义在uno.config.ts的shortcuts字段；且必须import 'virtual:uno.css'。

如何在vite中集成unocss并开启预设指令_通过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文件或<style></style>块中可用，<template></template>里不能写@apply。

快捷方式shortcuts要写在uno.config.ts顶层

快捷类名（如btn-primary）不会自动从main.css或index.css里提取——它们必须定义在 UnoCSS 配置对象的shortcuts字段下，否则编译时不会生成对应规则。

VitePress Generator

使用 VitePress 快速生成静态网站，支持安装依赖、初始化项目、本地预览、构建和部署。

下载

容易踩的坑：

把shortcuts写在rules里，或嵌套在theme中 → 无效
用shortcuts: { 'btn': 'px-3 py-1 rounded' }没问题，但若想支持动态命名（如btn-red），得用正则数组写法：[/^btn-(.*)$/, ([_, c]) => `bg-${c}-500 text-white`]
快捷方式里的类名必须是 UnoCSS 已知的原子类（比如px-3要能被presetUno解析），否则最终 CSS 会缺失

一个实用组合：

shortcuts: [
  {
    'flex-center': 'flex justify-center items-center',
    'btn-sm': 'px-2 py-1 text-xs rounded',
  },
  [/^btn-(\w+)$/, ([_, color]) => `px-3 py-1.5 rounded bg-${color}-500 text-white`]
]