Astro Integration

การผสานรวม 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 options
})

Style Reset

โดยค่าเริ่มต้น browser style reset จะไม่ถูก inject เพื่อเปิดใช้งาน ให้ติดตั้งแพ็กเกจ @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 // or a path to the reset file
    }),
  ],
})

การใช้งานโดยไม่มี presets

plugin นี้ไม่มาพร้อมกับ default presets ใดๆ

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 plugin

INFO

หากคุณกำลังสร้าง meta framework บน UnoCSS ดู ไฟล์นี้ สำหรับตัวอย่างวิธีการ bind default presets

หมายเหตุ

คอมโพเนนต์ client:only ต้องวางในโฟลเดอร์ components หรือเพิ่มใน content config ของ UnoCSS เพื่อให้ถูกประมวลผล