CLI

UnoCSSのコマンドラインインターフェース：@unocss/cli。

• 🍱 LaravelやKirbyなどの従来のバックエンドに最適
• 👀 ウォッチモード付属
• 🔌 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に複数のグロブパターンを渡すこともできます：

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

パッケージ設定の例：

INFO

npmスクリプトのグロブパターンにはエスケープされた引用符を追加してください。

{
  "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 {
  /**
   * ファイルにマッチするグロブパターン
   */
  patterns: string[]
  /**
   * 生成されるUnoCSSファイルの出力ファイル名
   */
  outFile: string
}

オプションの一覧については、UnoCSS設定ドキュメントを参照してください。

オプション

オプション
-v, --version	UnoCSSの現在のバージョンを表示
-c, --config-file <file>	設定ファイル
-o, --out-file <file>	生成されるUnoCSSファイルの出力ファイル名。デフォルトは現在の作業ディレクトリのuno.css
--stdout	生成されたUnoCSSファイルをSTDOUTに書き込み。--watchと--out-fileは無視されます
-w, --watch	グロブパターンで見つかったファイルを監視するかどうか
--preflights	プリフライトスタイルを有効化
--write-transformed	変換されたユーティリティでソースファイルを更新
-m, --minify	生成されたCSSを最小化
-h, --help	利用可能なCLIオプションを表示