UnoCSS集成与使用指南

原创已于 2025-06-24 09:29:20 修改 · 976 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #前端

于 2025-06-24 09:28:13 首次发布

一、核心包安装

使用包管理器（如pnpm、npm或yarn）安装UnoCSS及其常用预设：

pnpm add -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons

unocss：核心插件，为项目提供原子化CSS功能。
@unocss/preset-uno：提供类似Tailwind的原子类预设，方便快速构建样式。
@unocss/preset-attributify：支持属性化模式，允许在HTML标签上直接使用类似text-red这样的属性来定义样式，简化代码书写。
@unocss/preset-icons：提供图标库支持，方便项目中使用各种图标。

二、Vite配置

在vite.config.ts配置文件中引入并启用UnoCSS插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [vue(), UnoCSS()]
})

若需自定义配置文件路径，可通过configFile参数指定。

三、创建UnoCSS配置文件

（一）图标集成

以Icônes 为例，安装对应的图标库：

pnpm add -D @iconify-json/ic

这里的ic对应了Icônes 的最后路径参数。之后，可以通过i-{集合}:{图标名}的语法直接调用图标。

（二）新建`uno.config.ts`

在项目根目录创建uno.config.ts配置文件，定义规则、预设及快捷方式：

import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'

export default defineConfig({
    presets: [
        presetUno(), // 默认原子类预设
        presetAttributify(), // 属性模式支持
        presetIcons(), // 图标库支持
    ],
    rules: [
        // 自定义静态规则
        ['color-red', { color: 'red' }],
        // 动态规则（正则匹配）
        [/^text-(\d+)px$/, ([_, num]) => ({ fontSize: `${num}px` })]
    ],
    shortcuts: {
        'flex-center': 'flex justify-center items-center', // 组合类快捷方式
    }
})

其中，动态规则支持通过正则表达式生成响应式样式，例如text-16px会生成font-size:16px的样式。

四、引入样式文件

在入口文件（如main.ts）中导入虚拟CSS文件：

import 'virtual:uno.css'

此文件由UnoCSS插件动态生成，包含所有原子类样式。

五、使用原子类

（一）使用预设

使用presetUno提供的类似Tailwind的原子类：

<div class="p-4 bg-gray-100">
    <h1 class="text-xl text-blue-500">Hello UnoCSS</h1>
</div>

（二）属性模式

利用presetAttributify的属性化写法：

<div text-red text-20px>属性化写法</div>

（三）自定义规则

应用自定义的静态和动态规则：

<div class="color-red text-4.5">自定义规则</div>

（四）快捷方式

使用shortcuts定义的组合类快捷方式：

<div class="flex-center">居中</div>

（五）图标库

通过presetIcons，使用i-{集合}:{图标名}语法直接调用图标库：

<div class="i-ic-baseline-10k"/>