命令列介面

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 script glob 模式中加入跳脫引號。

package.json

{
  "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。

uno.config.ts

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 設定 文件。

選項

選項
-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