Intégration Astro

L'intégration UnoCSS pour Astro : @unocss/astro. Voir l'exemple.

Installation

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

export default defineConfig({
  integrations: [
    UnoCSS(),
  ],
})

Créez un fichier uno.config.ts :

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...options UnoCSS
})

Réinitialisation du style

Par défaut, la réinitialisation du style du navigateur ne sera pas injectée. Pour l'activer, installez le package @unocss/reset :

pnpm

pnpm add -D @unocss/reset

yarn

yarn add -D @unocss/reset

npm

npm install -D @unocss/reset

bun

bun add -D @unocss/reset

Et mettez à jour votre astro.config.ts :

import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // ou un chemin vers le fichier de reset
    }),
  ],
})

Utilisation sans presets

Ce plugin ne vient avec aucun preset par défaut.

pnpm

pnpm add -D @unocss/astro

yarn

yarn add -D @unocss/astro

npm

npm install -D @unocss/astro

bun

bun add -D @unocss/astro

import UnoCSS from '@unocss/astro'

export default {
  integrations: [
    UnoCSS(),
  ],
}

Pour plus de détails, veuillez consulter le plugin Vite.

INFO

Si vous construisez un méta-framework au-dessus de UnoCSS, consultez ce fichier pour un exemple sur la façon de lier les presets par défaut.

Notes

Les composants client:only doivent être placés dans le dossier components ou ajoutés à la configuration content de UnoCSS pour être traités.