命令行接口

🌐 CLI

UnoCSS 的命令行接口：@unocss/cli。

🌐 The command line interface for UnoCSS: @unocss/cli.

• 🍱 从限定文件中提取实用工具
• 👀 已包含 观看模式
• 🔌 通过 uno.config.ts 支持自定义配置
• ⚙️ 各种选项来自定义输出
• 🚀 支持多种输入模式

安装

🌐 Installation

此软件包随 unocss 软件包一起提供：

🌐 This package is shipped with the unocss package:

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

你还可以安装独立包：

🌐 You can also install the standalone package:

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

如果你无法找到该二进制文件（例如安装了 unocss 但只有 pnpm），你需要单独显式安装 @unocss/cli 包。

用法

🌐 Usage

你也可以向 @unocss/cli 传递多个通配符模式：

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

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

包配置示例：

🌐 Example package configuration:

INFO

确保将转义引号添加到你的 npm 脚本 glob 模式中。

package.json

{
  "scripts": {
    "dev": "unocss \"site/{snippets,templates}/**/*.php\" --watch",
    "build": "unocss \"site/{snippets,templates}/**/*.php\""
  },
  "devDependencies": {
    "@unocss/cli": "latest"
  }
}

开发

🌐 Development

添加 --watch（或 -w）标志以启用文件更改监视：

🌐 Add the --watch (or -w) flag to enable watching for file changes:

unocss "site/{snippets,templates}/**/*.php" --watch

生产

🌐 Production

unocss "site/{snippets,templates}/**/*.php"

最终的 uno.css 默认会生成到当前目录。

🌐 The final uno.css will be generated to the current directory by default.

内置功能

🌐 Built-in features

配置

🌐 Configurations

在项目的根目录创建一个 uno.config.js 或 uno.config.ts 配置文件，以自定义 UnoCSS。

🌐 Create a uno.config.js or uno.config.ts configuration file the root-level of your project to customize UnoCSS.

TIP

为了实现更细粒度的配置管理，我们建议使用配置文件。它还支持不同级别的打包和对扫描文件的重写。

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
  /**
   * Whether to rewrite the transformed utilities.
   *
   * - For css: if rewrite is true, it will not generate a new file, but directly modify the original file content.
   * - For other files: if rewrite is true, it replaces the original file with the transformed content.
   *
   * @default false
   */
  rewrite?: boolean

  /**
   * Whether to output CSS files scanned from patterns to outFile
   *
   * - false: Do not output CSS files
   * - true: Transform and output scanned CSS file contents to outFile
   * - 'multi': Output each CSS file separately with filename format `${originFile}-[hash]`
   * - 'single': Merge multiple CSS files into one output file named `outFile-merged.css`
   *
   * @default true
   */
  splitCss?: boolean | 'multi' | 'single'
}

重写源文件

🌐 Rewrite Source Files

使用 --rewrite 标志可以使用已转换的工具更新你的源文件。当你想将转换器（如 Variant Groups 或 Compile Class）直接应用于代码时，这非常有用。

🌐 Use the --rewrite flag to update your source files with transformed utilities. This is useful when you want to apply transformers (like Variant Groups or Compile Class) directly to your code.

unocss "src/**/*.vue" --rewrite

CSS 分割

🌐 CSS Splitting

当 CSS 文件包含在定义的模式中时，使用 --split-css 标志来控制 CSS 的输出。

🌐 When CSS files are included in the defined patterns, use the --split-css flag to control the output of CSS.

• false：不输出 CSS 文件
• true：转换并将扫描的 CSS 文件内容输出到 outFile
• 'multi'：分别输出每个 CSS 文件，文件名格式为 ${originFile}-[hash]
• 'single': 将多个 CSS 文件合并为一个名为 outFile-merged.css 的输出文件

unocss "src/**/*.vue" --split-css true|false|multi|single

默认预设

🌐 Default Preset

如果未找到 uno.config.ts 文件，CLI 将使用默认预设。你可以使用 --preset 参数指定要使用的默认预设版本。

🌐 If no uno.config.ts file is found, the CLI will use a default preset. You can specify which version of the default preset to use with the --preset flag.

• wind4：使用 preset-wind4。
• wind3：使用 preset-wind3。

unocss "src/**/*.vue" --preset wind3|wind4

注意：如果存在配置文件，此选项将被忽略。

WARNING

从版本 v66.6.0 开始，@unocss/cli 不再提供默认预设。用户需要显式指定 --preset 选项或在配置文件中配置预设。

有关选项列表，请查看 UnoCSS 配置 文档。

🌐 For a list of options, head over to the UnoCSS configurations docs.

选项

🌐 Options

Options
-v, --version	Display the current version of UnoCSS
-c, --config [file]	Config file
-o, --out-file <file>	The output filename for the generated UnoCSS file. Defaults to uno.css in the current working directory
--stdout	Write the generated UnoCSS file to STDOUT. Will cause the --watch and --out-file being ignored
-w, --watch	Indicates if the files found by the glob pattern should be watched
--preflights	Enable preflight styles
--rewrite	Update source files with transformed utilities
--write-transformed	Update source files with transformed utilities (deprecated, use --rewrite)
-m, --minify	Minify generated CSS
--debug	Enable debug mode
--split-css [mode]	Whether to output CSS files scanned from patterns to outFile. Options: true, false, multi, single
--preset [default-preset]	Switch wind3 or wind4 preset as default. If you have configured uno.config, this option will be ignored.
-h, --help	Display available CLI options