UnoCss最新配置攻略

安装命令

# 安装 UnoCSS
npm install -D unocss

# 如果使用 Vue 3，还需要安装预设
npm install -D @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons

配置步骤

1.创建uno.config.ts文件（项目根目录）

import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'
import presetAttributify from '@unocss/preset-attributify'
import presetIcons from '@unocss/preset-icons'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      collections: {
        // 可以配置图标集合
      }
    })
  ],
  // 其他配置...
})

2.修改vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS()  // 添加 UnoCSS 插件
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

3.在main.ts中引入样式

import 'virtual:uno.css'

4.在index.html或者style.css中添加

/* 或者直接在 style.css 中 */
@import 'uno.css';

最新用法和文档

官方文档

• 官网：unocss.dev/

• 中文文档：unocss.dev/interactive...

• GitHub：github.com/unocss/unoc...

核心特性

1. 原子化 CSS：按需生成，体积小
2. 即时编译：开发时即时生成样式
3. 预设系统：支持多个预设组合
4. 图标支持：内置图标预设

常用预设

• @unocss/preset-uno：默认预设（Tailwind 兼容）

• @unocss/preset-attributify：属性化模式

• @unocss/preset-icons：图标支持

• @unocss/preset-typography：排版预设

• @unocss/preset-web-fonts：Web 字体

使用示例

<template>
  <!-- 原子化类名 -->
  <div class="flex items-center justify-center p-4 bg-blue-500 text-white">
    Hello UnoCSS
  </div>
  
  <!-- 属性化模式 -->
  <div flex items-center p="4" bg="blue-500" text="white">
    Hello UnoCSS
  </div>
  
  <!-- 图标 -->
  <div class="i-carbon-sun" />
</template>

流程

# 1. 安装依赖
npm install -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons

# 2. 创建 uno.config.ts（手动创建）

# 3. 修改 vite.config.ts（添加 UnoCSS 插件）

# 4. 在 main.ts 中引入 'virtual:uno.css'

Vue 3 + Vite + TypeScript + Element Plus，建议配置：

// uno.config.ts
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'
import presetIcons from '@unocss/preset-icons'

export default defineConfig({
  presets: [
    presetUno(),
    presetIcons()
  ],
  // 安全列表（确保某些类名不会被清除）
  safelist: [],
  // 快捷方式
  shortcuts: {
    'btn': 'px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600'
  }
})