Astro एकीकरण

Astro के लिए UnoCSS एकीकरण: @unocss/astro। उदाहरण देखें।

इंस्टॉलेशन

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

uno.config.ts फ़ाइल बनाएं:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS विकल्प
})

स्टाइल रीसेट

डिफ़ॉल्ट रूप से, ब्राउज़र स्टाइल रीसेट इंजेक्ट नहीं किया जाएगा। इसे सक्षम करने के लिए, @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

और अपना astro.config.ts अपडेट करें:

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

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // या रीसेट फ़ाइल का पथ
    }),
  ],
})

प्रीसेट्स के बिना उपयोग

यह प्लगइन किसी भी डिफ़ॉल्ट प्रीसेट के साथ नहीं आता है।

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

अधिक विवरण के लिए, कृपया Vite प्लगइन देखें।

INFO

यदि आप UnoCSS के ऊपर एक मेटा फ्रेमवर्क बना रहे हैं, तो डिफ़ॉल्ट प्रीसेट्स को बाइंड करने का उदाहरण के लिए यह फ़ाइल देखें।

नोट्स

client:only कंपोनेंट्स को components फ़ोल्डर में रखा जाना चाहिए या UnoCSS के content कॉन्फ़िग में जोड़ा जाना चाहिए ताकि प्रोसेस किया जा सके।