Tích hợp Astro

Tích hợp UnoCSS cho Astro: @unocss/astro. Xem ví dụ.

Cài đặt

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

Tạo tệp uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

Đặt lại kiểu (Style Reset)

Theo mặc định, đặt lại kiểu trình duyệt sẽ không được chèn vào. Để bật nó, hãy cài đặt gói @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

Và cập nhật astro.config.ts của bạn:

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

export default defineConfig({
  integrations: [
    UnoCSS({
      injectReset: true // or a path to the reset file
    }),
  ],
})

Sử dụng không cần preset

Plugin này không đi kèm bất kỳ preset mặc định nào.

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

Để biết thêm chi tiết, vui lòng tham khảo Vite plugin.

INFO

Nếu bạn đang xây dựng một meta framework trên UnoCSS, xem tệp này để biết ví dụ về cách liên kết các preset mặc định.

Lưu ý

Các thành phần client:only phải được đặt trong thư mục components hoặc được thêm vào cấu hình content của UnoCSS để được xử lý.