UnoCss最新配置攻略

怪可爱的地球人
135 阅读4分钟
安装命令
# 安装 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';

最新用法和文档

官方文档

核心特性

  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'
  }
})

UnoCss规范写法

一、UnoCss规范
  1. 解析规则：属性-数值，格式便于识别。
  2. 避免冲突：区分属性名和数值。
  3. 统一规范：与其他工具（如Tailwind）保持一致。
二、自定义可以不用字符串

除非是自定义用无连字符串，就要自己去定义css。

三、或者使用UnoCss的任意值
<!-- 使用任意值语法 -->
<div class="pt-[3rem] pb-[3rem] pl-[4rem] pr-[4rem]">内容</div>

再来讲解一下配置uno.config.ts(项目中常用)

核心特点

1.使用前缀（Prefix0）
presetUno({ prefix: "ly-" })
//所有UnoCss类名都需要加ly-前缀
//避免与其他css框架冲突

对比：

<!-- 没有前缀（默认） -->
<div class="p-4 bg-blue-500">内容</div>

<!-- 有前缀（这个配置） -->
<div class="ly-p-4 ly-bg-blue-500">内容</div>
2.Transfromers(转换器)
transformers: [
  transformerDirectives(),    // 指令转换器
  transformerVariantGroup()    // 变体组转换器
]

说明： transformerDirectives：支持@apply指令 transformerVariantGroup：支持辩题组语法

使用示例：

<!-- transformerDirectives：支持 @apply -->
<style>
.custom {
  @apply p-4 bg-blue-500;
}
</style>

<!-- transformerVariantGroup：支持变体组 -->
<div class="hover:(bg-blue-500 text-white)">
  内容
</div>
3.快捷方式（Shortcuts）
shortcuts: {
  "ly-common-border": "ly-border-1px ly-border-solid ly-border-#D6DCE1",
  "ly-common-border-b": "ly-border-b-1px ly-border-b-solid ly-border-b-#D6DCE1",
  "ly-bg-primary": "ly-bg-#F5F7FA",
  "ly-tip-gray": "ly-bg-#F3F6F8 ly-rounded-8px ly-px-12px ly-py-7px ly-w-full ly-flex ly-items-center ly-gap-24px ly-text-14px ly-my-24px",
}
整体配置uno.config.ts
import { defineConfig, presetAttributify, presetUno, transformerDirectives, transformerVariantGroup } from "unocss";

export default defineConfig({
  shortcuts: {
    "ly-common-border": "ly-border-1px ly-border-solid ly-border-#D6DCE1",
    "ly-common-border-b": "ly-border-b-1px ly-border-b-solid ly-border-b-#D6DCE1",
    "ly-bg-primary": "ly-bg-#F5F7FA",
    "ly-tip-gray":
      "ly-bg-#F3F6F8 ly-rounded-8px ly-px-12px ly-py-7px ly-w-full ly-flex ly-items-center ly-gap-24px ly-text-14px ly-my-24px",
  },
  presets: [presetUno({ prefix: "ly-" })],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});

image.png presetUno被弃用了. 弃用原因

UnoCSS（框架）
  └── presetUno（预设，已重命名为 preset-wind3）
       └── 提供 Tailwind CSS 兼容的工具类

UnoCSS（框架，继续使用）
  ├── preset-wind3（新名称，替代 presetUno）
  ├── preset-icons（图标预设）
  ├── preset-attributify（属性模式）
  └── 其他预设...

1.重命名

@unocss/preset-uno  →  @unocss/preset-wind3

原因： 1.更清晰的命名 2.明确表示这是 Tailwind CSS/Windi CSS 的兼容预设 3.与 UnoCSS 的其他预设命名保持一致

image.png

如何迁移：

1.安装新包

npm install -D @unocss/preset-wind3

2.更新导入

// 旧写法（已弃用）
import presetUno from '@unocss/preset-uno'

//  新写法
import presetWind3 from '@unocss/preset-wind3'

3.更新配置

// 旧配置
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'

export default defineConfig({
  presets: [
    presetUno({ prefix: "ly-" })
  ]
})

// 新配置
import { defineConfig } from 'unocss'
import presetWind3 from '@unocss/preset-wind3'

export default defineConfig({
  presets: [
    presetWind3({ prefix: "ly-" })
  ]
})

更新配置之前与更新配置以后：

//更新之前
import { defineConfig, presetAttributify, presetUno, transformerDirectives, transformerVariantGroup } from "unocss";

export default defineConfig({
  presets: [presetUno({ prefix: "ly-" })],
  // ...
});

//更新之后
import { defineConfig, presetAttributify, presetWind3, transformerDirectives, transformerVariantGroup } from "unocss";

export default defineConfig({
  presets: [presetWind3({ prefix: "ly-" })],
  // ...
});

功能对比：

presetUno 与 presetWind3
  • 功能相同：提供相同的工具类
  • API 相同：配置方式完全一样
  • 只是重命名：内部实现没有变化
使用方式
<!-- 使用方式完全一样 -->
<div class="ly-p-4 ly-bg-blue-500">内容</div>

迁移步骤：

1.安装新包

   npm install -D @unocss/preset-wind3

2.更新导入

   import presetWind3 from '@unocss/preset-wind3'

3.更新配置

   presets: [presetWind3({ prefix: "ly-" })]

4.可选：移除旧包

   npm uninstall @unocss/preset-uno
avatar
文章
阅读
粉丝