Config File

UnoCSS'inizi yapılandırmak için özel bir uno.config.ts dosyası kullanmanızı şiddetle öneririz, IDE'ler ve diğer entegrasyonlarla en iyi deneyimi elde etmek için.

Tam özellikli bir yapılandırma dosyası şöyle görünür:

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 veya diğer araç yapılandırmalarınız içindeki satır içi yapılandırmayla karşılaştırıldığında, özel yapılandırma dosyası IDE'ler ve entegrasyonlarla, ESLint eklentisi gibi diğer araçlarla daha iyi çalışacak ve HMR'nin daha iyi çalışmasını sağlayacaktır.

Varsayılan olarak, UnoCSS projenizin kök dizininde uno.config.{js,ts,mjs,mts} veya unocss.config.{js,ts,mjs,mts} dosyalarını otomatik olarak arayacaktır. Yapılandırma dosyasını manuel olarak da belirtebilirsiniz, örneğin Vite'de:

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

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

Desteklenen yapılandırma seçeneklerinin tam listesi için lütfen Yapılandırmalar referansına bakın.

Config File ​

Config File