CLI

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

• 🍱 Laravel や Kirby のような従来のバックエンドに適しています
• 👀 ウォッチモードを含む
• 🔌 uno.config.ts を介したカスタム設定をサポート

インストール

このパッケージは unocss パッケージに同梱されています:

::: code-group

pnpm add -D unocss

yarn add -D unocss

npm install -D unocss

bun add -D unocss

:::

スタンドアロンパッケージをインストールすることもできます:

::: code-group

pnpm add -D @unocss/cli

yarn add -D @unocss/cli

npm install -D @unocss/cli

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 設定ドキュメントをご覧ください。

オプション