Konfigurationsdatei

Wir empfehlen dringend, eine dedizierte uno.config.ts Datei zu verwenden, um Ihr UnoCSS zu konfigurieren, um die beste Erfahrung mit IDEs und anderen Integrationen zu erhalten.

Eine vollständig ausgestattete Konfigurationsdatei sieht so aus:

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(),
  ],
})

Im Vergleich zur Inline-Konfiguration in Ihrer vite.config.ts oder anderen Tool-Konfigurationen funktioniert die dedizierte Konfigurationsdatei besser mit IDEs und Integrationen, mit anderen Tools wie dem ESLint-Plugin, zusätzlich macht es HMR besser funktionieren.

Standardmäßig sucht UnoCSS automatisch nach uno.config.{js,ts,mjs,mts} oder unocss.config.{js,ts,mjs,mts} im Stammverzeichnis Ihres Projekts. Sie können die Konfigurationsdatei auch manuell angeben, zum Beispiel in Vite:

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

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

Für die vollständige Liste der unterstützten Konfigurationsoptionen lesen Sie bitte die Konfigurationsreferenz.

Konfigurationsdatei ​

Konfigurationsdatei