Astro Integration

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 options
})

스타일 리셋

기본적으로 브라우저 스타일 리셋은 주입되지 않습니다. 활성화하려면 @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
    }),
  ],
})

preset 없이 사용하기

이 플러그인은 기본 preset이 없습니다.

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 위에 메타 프레임워크를 구축하고 있다면, 기본 preset을 바인딩하는 방법의 예제는 이 파일을 참조하세요.

참고사항

client:only 컴포넌트는 처리되기 위해 components 폴더에 배치되거나 UnoCSS의 content 설정에 추가되어야 합니다.