1.3 典型的UnoCSS配置案例

以下是一个典型的 UnoCSS 配置案例，包含了多种常用的设置和功能：

// uno.config.ts
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
import { presetTypography } from '@unocss/preset-typography'
import { presetWebFonts } from '@unocss/preset-web-fonts'
import transformerDirectives from '@unocss/transformer-directives'
import transformerVariantGroup from '@unocss/transformer-variant-group'
 
export default defineConfig({
  // 启用预设
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'Roboto',
        mono: ['Fira Code', 'Fira Mono:400,700'],
      },
    }),
  ],
  
  // 自定义快捷方式
  shortcuts: [
    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600 !outline-none'],
  ],
  
  // 自定义规则
  rules: [
    ['custom-rule', { color: 'red' }],
    [/^text-(.*)$/, ([, c]) => ({ color: c })],
  ],
  
  // 主题配置
  theme: {
    colors: {
      'primary': '#3490dc',
      'secondary': '#ffed4a',
      'danger': '#e3342f',
    },
    breakpoints: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
  },
  
  // 变体
  variants: [
    (matcher) => {
      if (!matcher.startsWith('hover:')) return matcher
      return {
        matcher: matcher.slice(6),
        selector: s => `${s}:hover`,
      }
    },
  ],
  
  // 安全列表，确保这些类始终生成
  safelist: 'prose prose-sm m-auto text-left'.split(' '),
  
  // 转换器
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
  
  // 自定义注入
  inject: {
    postprocess: (css) => css.replace(/\/\*[\s\S]*?\*\//g, ''),
  },
  
  // IDE 自动补全支持
  autocomplete: {
    shorthands: {
      // 自定义快捷方式的自动补全
      'btn': 'btn',
      'icon': 'i-',
    },
  },
})

这个配置案例包含了以下特性：

1. 预设：使用了多个预设，包括基础的 presetUno、属性模式的 presetAttributify、图标支持的 presetIcons、排版的 presetTypography 和 Web 字体的 presetWebFonts。

2. 快捷方式：定义了常用的类组合，如按钮和图标按钮。

3. 自定义规则：包含了一个静态规则和一个动态规则（使用正则表达式）。

4. 主题配置：自定义了颜色和断点。

5. 变体：添加了一个自定义的 hover 变体处理器。

6. 安全列表：确保某些类始终被生成，即使它们没有在代码中被使用。

7. 转换器：使用了指令转换器和变体组转换器，增强了 UnoCSS 的功能。

8. 自定义注入：在这个例子中，移除了所有的 CSS 注释。

9. IDE 自动补全支持：为自定义的快捷方式添加了自动补全配置。

这个配置涵盖了 UnoCSS 的大多数常用功能，可以根据项目需求进行调整和扩展。它提供了一个良好的起点，可以满足大多数 Web 项目的需求，同时保持了高度的可定制性。