Skip to content
On this page

CLI

UnoCSS 的命令行界面:@unocss/cli

  • 🍱 适用于传统的后端框架,如 Laravel 或 Kirby
  • 👀 包含监听模式
  • 🔌 支持通过uno.config.ts进行自定义配置

安装

这个包已经包含在 unocss 包中:

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

你也可以单独安装 @unocss/cli 包:

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

使用

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

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

配置示例:

INFO

确保在 npm 脚本的 glob 模式中添加转义符号。

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

开发模式

添加 --watch (或 -w) 标志以启用文件变动监听:

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

生产模式

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

默认情况下,生成的 uno.css 将会保存在当前目录中。

内置功能

配置

在项目的根目录下创建一个 uno.config.jsuno.config.ts 配置文件来自定义 UnoCSS。

ts
import { defineConfig } from 'unocss'

export default defineConfig({
  cli: {
    entry: {} // CliEntryItem | CliEntryItem[]
  }
  // ...
})

interface CliEntryItem {
  /**
   * 匹配文件的glob模式
   */
  patterns: string[]
  /**
   * 生成的UnoCSS文件的输出文件名
   */
  outFile: string
}
import { defineConfig } from 'unocss'

export default defineConfig({
  cli: {
    entry: {} // CliEntryItem | CliEntryItem[]
  }
  // ...
})

interface CliEntryItem {
  /**
   * 匹配文件的glob模式
   */
  patterns: string[]
  /**
   * 生成的UnoCSS文件的输出文件名
   */
  outFile: string
}

有关选项的完整列表,请查看UnoCSS 配置文档

选项

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启用预检样式
-m, --minify缩小生成的 CSS
-h, --help显示可用的 CLI 命令

Released under the MIT License.