CLI

UnoCSS용 명령줄 인터페이스: @unocss/cli.

• 🍱 Laravel이나 Kirby와 같은 전통적인 백엔드에 적합
• 👀 Watch 모드 포함
• 🔌 uno.config.ts를 통한 사용자 정의 설정 지원

설치

이 패키지는 unocss 패키지와 함께 제공됩니다:

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

독립 실행형 패키지도 설치할 수 있습니다:

pnpm

pnpm add -D @unocss/cli

yarn

yarn add -D @unocss/cli

npm

npm install -D @unocss/cli

bun

bun add -D @unocss/cli

INFO

바이너리를 찾을 수 없는 경우(예: pnpm과 unocss만 설치된 경우), @unocss/cli 독립 실행형 패키지를 명시적으로 설치해야 합니다.

사용법

@unocss/cli에 여러 glob 패턴을 전달할 수도 있습니다:

unocss "site/snippets/**/*.php" "site/templates/**/*.php"

패키지 설정 예제:

INFO

npm 스크립트 glob 패턴에 이스케이프된 따옴표를 추가해야 합니다.

{
  "scripts": {
    "dev": "unocss \"site/{snippets,templates}/**/*.php\" --watch",
    "build": "unocss \"site/{snippets,templates}/**/*.php\""
  },
  "devDependencies": {
    "@unocss/cli": "latest"
  }
}

개발

--watch (또는 -w) 플래그를 추가하여 파일 변경 감시를 활성화하세요:

unocss "site/{snippets,templates}/**/*.php" --watch

프로덕션

unocss "site/{snippets,templates}/**/*.php"

최종 uno.css는 기본적으로 현재 디렉토리에 생성됩니다.

내장 기능

설정

프로젝트 루트 레벨에 uno.config.js 또는 uno.config.ts 설정 파일을 생성하여 UnoCSS를 사용자 정의하세요.

import { defineConfig } from 'unocss'

export default defineConfig({
  cli: {
    entry: {}, // CliEntryItem | CliEntryItem[]
  },
  // ...
})

interface CliEntryItem {
  /**
   * Glob patterns to match files
   */
  patterns: string[]
  /**
   * The output filename for the generated UnoCSS file
   */
  outFile: string
}

옵션 목록은 UnoCSS configurations 문서를 참조하세요.

옵션

옵션
-v, --version	UnoCSS의 현재 버전 표시
-c, --config-file <file>	설정 파일
-o, --out-file <file>	생성된 UnoCSS 파일의 출력 파일명. 기본값은 현재 작업 디렉토리의 uno.css
--stdout	생성된 UnoCSS 파일을 STDOUT에 작성. --watch와 --out-file이 무시됨
-w, --watch	glob 패턴으로 찾은 파일을 감시해야 하는지 표시
--preflights	preflight 스타일 활성화
--write-transformed	변환된 유틸리티로 소스 파일 업데이트
-m, --minify	생성된 CSS 압축
-h, --help	사용 가능한 CLI 옵션 표시