Astro Integration

Astro için UnoCSS entegrasyonu: @unocss/astro. Örneği kontrol edin.

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

Bir uno.config.ts dosyası oluşturun:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS seçenekleri
})

Style Reset

Varsayılan olarak, tarayıcı stil sıfırlama enjekte edilmeyecektir. Etkinleştirmek için @unocss/reset paketini yükleyin:

pnpm

pnpm add -D @unocss/reset

yarn

yarn add -D @unocss/reset

npm

npm install -D @unocss/reset

bun

bun add -D @unocss/reset

Ve astro.config.ts'nizi güncelleyin:

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

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // veya sıfırlama dosyasına bir yol
    }),
  ],
})

Preset olmadan kullanım

Bu eklenti herhangi bir varsayılan preset ile gelmez.

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

Daha fazla ayrıntı için lütfen Vite eklentisine bakın.

INFO

UnoCSS üzerine bir meta çerçeve oluşturuyorsanız, varsayılan preset'leri nasıl bağlayacağınıza dair bir örnek için bu dosyaya bakın.

Notes

client:only bileşenleri components klasörüne yerleştirilmeli veya işlenmek üzere UnoCSS'in content yapılandırmasına eklenmelidir.