命令行界面

UnoCSS 的命令行界面：@unocss/cli。

• 🍱 適用於傳統後端，如 Laravel 或 Kirby
• 👀 監聽模式
• 🔌 通過 uno.config.ts 支持自定義配置

安裝

此包隨 unocss 包一起提供：

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

你也可以安裝獨立包：

pnpm

pnpm add -D @unocss/cli

yarn

yarn add -D @unocss/cli

npm

npm install -D @unocss/cli

提示

如果你無法找到二進制文件（例如使用 pnpm 且僅安裝了 unocss），你需要顯式安裝 @unocss/cli 獨立包。

使用

你可以傳遞多個 glob 模式到 @unocss/cli：

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

示例包配置：

提示

確保在 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: 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	指示是否監聽 glob 模式找到的文件
--preflights	啟用預置樣式
--write-transformed	使用轉換後的實用類更新源文件
-m, --minify	壓縮生成的 CSS
-h, --help	顯示可用的 CLI 選項