Configuratiebestand

We raden sterk aan om een speciaal uno.config.ts bestand te gebruiken om je UnoCSS te configureren, om de beste ervaring met IDE's en andere integraties te krijgen.

Een volledig functioneel configuratiebestand ziet er zo uit:

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

Vergeleken met de inline configuratie in je vite.config.ts of andere tool configuraties, zal het speciale configuratiebestand beter werken met IDE's en integraties, met andere tools zoals de ESLint plugin, en daarnaast HMR beter laten werken.

Standaard zal UnoCSS automatisch zoeken naar uno.config.{js,ts,mjs,mts} of unocss.config.{js,ts,mjs,mts} in de root directory van je project. Je kunt ook het configuratiebestand handmatig specificeren, bijvoorbeeld in Vite:

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

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

Voor de volledige lijst van ondersteunde configuratie opties, verwijzen we naar de Configuratie referentie.

Configuratiebestand ​

Configuratiebestand