配置文件

¥Config File

我们强烈建议使用专用的 uno.config.ts 文件来配置你的 UnoCSS，以获得 IDE 和其他集成的最佳体验。

¥We highly recommend to use a dedicated uno.config.ts file to configure your UnoCSS, in order to get the best experience with IDEs and other integrations.

完整功能的配置文件如下所示：

¥A full featured config file looks like this:

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 更好地工作。

¥Compared to the inline configuration inside your vite.config.ts or other tools configurations, the dedicated config file will work better with IDEs and integrations, with other tools like the ESLint plugin, in addition making HMR work better.

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

¥By default, UnoCSS will automatically look for uno.config.{js,ts,mjs,mts} or unocss.config.{js,ts,mjs,mts} in the root directory of your project. You can also specify the config file manually, for example in Vite:

vite.config.ts

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

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

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

¥For the full list of supported configuration options, please refer to the Configurations reference.