配置文件

我们强烈建议使用一个专门的 uno.config.ts 文件来配置您的 UnoCSS，以便在使用集成开发环境（IDE）和其他集成工具时获得最佳体验。

一个完整的配置文件示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

export default defineConfig({
  shortcuts: [
    // ...
  ],
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})

与位于 vite.config.ts 或其他工具配置文件内部的内联配置相比，专用的配置文件在与 IDE 和其他工具（如 ESLint 插件）的集成方面效果更好，并且可以更好地支持热模块重载（HMR）。

默认情况下，UnoCSS 会自动在项目的根目录中查找 uno.config.{js,ts,mjs,mts} 或 unocss.config.{js,ts,mjs,mts} 文件。你也可以手动指定配置文件，例如在 Vite 中：

1
2
3
4
5
6
7
8
9
10
11
// vite.config.ts
import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    UnoCSS({
      configFile: '../my-uno.config.ts',
    })
  ]
})

有关支持的配置选项的完整列表，请参考配置参考文档。