تكامل Astro

تكامل UnoCSS لـ Astro: @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

إذا كنت تبني إطار عمل meta على رأس UnoCSS، راجع هذا الملف للحصول على مثال حول كيفية ربط الإعدادات المسبقة الافتراضية.

ملاحظات

يجب وضع مكونات client:only في مجلد components أو إضافتها إلى تكوين content الخاص بـ UnoCSS من أجل معالجتها.