Astro Integration

UnoCSS integrácia pre Astro: @unocss/astro. Pozrite si príklad.

Inštalácia

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

Vytvorte súbor uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS možnosti
})

Style Reset

Predvolene nebude vstreknutý reset štýlov prehliadača. Ak ho chcete povoliť, nainštalujte balík @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

A aktualizujte váš astro.config.ts:

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

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // alebo cesta k resetovaciemu súboru
    }),
  ],
})

Použitie bez presetov

Tento plugin neprichádza so žiadnymi predvolenými presetmi.

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

Viac podrobností nájdete v Vite plugin.

INFO

Ak budujete meta framework na vrchu UnoCSS, pozrite si tento súbor pre príklad, ako viazať predvolené presety.

Poznámky

client:only komponenty musia byť umiestnené v zložke components alebo pridané do konfigurácie content v UnoCSS, aby boli spracované.