Astro Integracija

UnoCSS integracija za Astro: @unocss/astro. Preverite primer.

Namestitev

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

Ustvarite datoteko uno.config.ts:

import { defineConfig } from 'unocss'

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

Ponastavitev sloga

Privzeto ponastavitev sloga brskalnika ne bo vbrizgana. Za omogočitev namestite paket @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

In posodobite vaš astro.config.ts:

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

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // ali pot do datoteke za ponastavitev
    }),
  ],
})

Uporaba brez prednastavitev

Ta vtičnik ne prihaja s privzetimi prednastavitvami.

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

Za več podrobnosti si oglejte Vite vtičnik.

INFO

Če gradite meta framework na vrhu UnoCSS, si oglejte to datoteko za primer, kako vezati privzete prednastavitve.

Opombe

client:only komponente morajo biti postavljene v imenik components ali dodane v UnoCSS content konfiguracijo, da bodo obdelane.