配置文件

🌐 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,
  presetWebFonts,
  presetWind3,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

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

与在你的 vite.config.ts 或其他工具配置中的内联配置相比，专用的配置文件在与 IDEs 和集成的使用中，以及与其他工具如 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.