Skip to content

CLI

UnoCSS 的命令行接口:@unocss/cli

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

  • 🍱 适合 Laravel 或 Kirby 等传统后端

    ¥🍱 Suited for traditional backends like Laravel or Kirby

  • 👀 包括 监视模式

    ¥👀 Watch mode included

  • 🔌 支持通过 uno.config.ts 进行自定义配置

    ¥🔌 Supports custom configurations via uno.config.ts

安装

¥Installation

该软件包随 unocss 软件包一起提供:

¥This package is shipped with the unocss package:

bash
pnpm add -D unocss
bash
yarn add -D unocss
bash
npm install -D unocss

你还可以安装独立包:

¥You can also install the standalone package:

bash
pnpm add -D @unocss/cli
bash
yarn add -D @unocss/cli
bash
npm install -D @unocss/cli

信息

如果你无法找到二进制文件(例如,使用 pnpm 并且仅安装了 unocss),则需要显式安装 @unocss/cli 独立包。

¥If you are not able to find the binary (e.g. with pnpm and only unocss is installed), you'll need to explicit install @unocss/cli standalone package.

用法

¥Usage

你还可以将多个 glob 模式传递给 @unocss/cli

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

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

包配置示例:

¥Example package configuration:

信息

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

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

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:

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

生产

¥Production

bash
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.jsuno.config.ts 配置文件以自定义 UnoCSS。

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

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 配置 文档。

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

选项

¥Options

选项
-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 选项