Fichier de Configuration

Nous recommandons fortement d'utiliser un fichier uno.config.ts dédié pour configurer votre UnoCSS, afin d'obtenir la meilleure expérience avec les IDEs et autres intégrations.

Un fichier de configuration complet ressemble à ceci :

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

Comparé à la configuration en ligne dans votre vite.config.ts ou autres configurations d'outils, le fichier de configuration dédié fonctionnera mieux avec les IDEs et intégrations, avec d'autres outils comme le plugin ESLint, en plus de faire fonctionner le HMR mieux.

Par défaut, UnoCSS cherchera automatiquement uno.config.{js,ts,mjs,mts} ou unocss.config.{js,ts,mjs,mts} dans le répertoire racine de votre projet. Vous pouvez également spécifier le fichier de configuration manuellement, par exemple dans Vite :

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

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

Pour la liste complète des options de configuration prises en charge, veuillez vous référer à la référence des configurations.