前言：大致了解什么是 UnoCss

UnoCSS 是即时原子 CSS 引擎，其设计灵活且可扩展。核心是不固定的，所有 CSS 工具都是通过预设提供的。
你可以通过在本地配置文件中提供规则来定义自定义 CSS 工具

// unocss.config.ts

export default defineConfig({
     rules: [
          // 将规则的第一个参数（我们称之为匹配器）更改为 RegExp，将主体更改为函数，使规则动态化
          [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
     ],
})

通过这样做，现在你可以拥有任意外边距工具，例如 m-1、m-100 或 m-52.43。再说一次，UnoCSS 仅在你使用它们时生成它们

// html

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>

// css

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

什么是预设

制定一些规则后，你可以将它们提取到预设中，并与其他人共享
可以查看官方预设和社区预设了解更多信息

// my-preset.ts 这是提取的预设文件

import { Preset } from 'unocss'

export const myPreset: Preset = {
    name: 'my-preset',
    rules: [
        [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
        [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
    ],
    variants: [/* ... */],
    shortcuts: [/* ... */],
  // ...
}

// unocss.config.ts 在配置文件中使用预设

import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
    presets: [
        myPreset, // 提取出来的预设
    ],
})

安装 UnoCss

pnpm add -D unocss
pnpm add  @unocss/eslint-plugin --save-dev

配置 unocss.config.ts

import {
    defineConfig,
    presetAttributify,
    presetMini,
    presetWind3,
    transformerDirectives,
    transformerVariantGroup,
} from 'unocss'

export default defineConfig({
    // 常见用例的预定义配置 (即：预设配置)
    presets: [
        presetMini({ dark: 'class' }),
        // https://unocss.dev/presets/attributify#properties-conflicts
        presetAttributify({ prefix: 'un-', prefixedOnly: true }),
        presetWind3(),
    ],

    // 转换器
    transformers: [transformerDirectives(), transformerVariantGroup()],
    
    // 快捷方式可让你将多个规则组合成一个简写
    shortcuts: {
        'wh-full': 'w-full h-full',
        'flex-ac': 'flex justify-around items-center',
        'flex-bc': 'flex justify-between items-center',
    },
    theme: {},
})

注意1：将 UnoCss 集成到 Vite 中

// vite.config.ts 

import UnoCSS from 'unocss/vite'

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

注意2：将 virtual:uno.css 添加到你的主入口中

// main.ts

import 'virtual:uno.css'

注意3：在 VSCode 中安装 UnoCSS 插件

UnoCSS.png

第七章：配置 unocss.config.ts