命令行界面

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

信息

如果你无法找到二进制文件（例如，使用 pnpm 且仅安装了 unocss），则需要显式安装独立的 @unocss/cli 软件包。

Usage

You can also pass multiple glob patterns to @unocss/cli:

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

Example package configuration:

信息

Make sure to add escaped quotes to your npm script glob patterns.

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 文件写入标准输出。这将导致 --watch 和 --out-file 选项被忽略。
-w, --watch	指示是否应监视通过 glob 模式找到的文件。
--preflights	启用预飞行样式。
--write-transformed	用转换后的工具类更新源文件。
-m, --minify	压缩生成的 CSS。
-h, --help	显示可用的 CLI 选项。