Astro Integration

Die UnoCSS Integration für Astro: @unocss/astro. Überprüfen Sie das Beispiel.

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

Erstellen Sie eine uno.config.ts Datei:

import { defineConfig } from 'unocss'

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

Style Reset

Standardmäßig wird Browser Style Reset nicht injiziert. Um es zu aktivieren, installieren Sie das @unocss/reset Paket:

pnpm

pnpm add -D @unocss/reset

yarn

yarn add -D @unocss/reset

npm

npm install -D @unocss/reset

bun

bun add -D @unocss/reset

Und aktualisieren Sie Ihre astro.config.ts:

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

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // oder ein Pfad zur Reset-Datei
    }),
  ],
})

Verwendung ohne Presets

Dieses Plugin kommt ohne Standard-Presets.

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

Für weitere Details lesen Sie bitte das Vite Plugin.

INFO

Wenn Sie ein Meta-Framework auf Basis von UnoCSS erstellen, sehen Sie diese Datei für ein Beispiel, wie Sie die Standard-Presets binden können.

Hinweise

client:only Komponenten müssen im components Ordner platziert oder zur content Konfiguration von UnoCSS hinzugefügt werden, um verarbeitet zu werden.