Integrazione Astro

L'integrazione UnoCSS per Astro: @unocss/astro. Controlla l'esempio.

Installazione

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

Crea un file uno.config.ts:

import { defineConfig } from 'unocss'

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

Reset Stile

Per impostazione predefinita, il reset di stile del browser non verrà iniettato. Per abilitarlo, installa il pacchetto @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

E aggiorna il tuo astro.config.ts:

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

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // o un percorso al file reset
    }),
  ],
})

Utilizzo senza preset

Questo plugin non viene fornito con preset predefiniti.

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

Per maggiori dettagli, consulta il plugin Vite.

INFO

Se stai costruendo un meta framework su UnoCSS, vedi questo file per un esempio su come collegare i preset predefiniti.

Note

I componenti client:only devono essere posizionati nella cartella components o aggiunti alla configurazione content di UnoCSS per essere elaborati.