CLI

Интерфейс командной строки для UnoCSS: @unocss/cli.

• 🍱 Извлечение утилит из указанных файлов
• 👀 Режим наблюдения (Watch mode) включен
• 🔌 Поддержка пользовательских конфигураций через 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.

Использование

Вы также можете передать несколько glob-шаблонов в @unocss/cli:

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

Пример конфигурации пакета:

ИНФОРМАЦИЯ

Не забудьте добавить экранированные кавычки к glob-шаблонам в npm-скрипте.

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: string[]
  /**
   * Имя выходного файла для сгенерированного файла UnoCSS
   */
  outFile: string
  /**
   * Нужно ли перезаписывать преобразованные утилиты.
   *
   * - Для css: если rewrite имеет значение true, новый файл не будет создан, а содержимое исходного файла будет изменено напрямую.
   * - Для других файлов: если rewrite имеет значение true, исходный файл заменяется преобразованным содержимым.
   *
   * @default false
   */
  rewrite?: boolean

  /**
   * Выводить ли CSS-файлы, найденные по шаблонам, в outFile
   *
   * - false: Не выводить CSS-файлы
   * - true: Преобразовать и вывести содержимое сканированных CSS-файлов в outFile
   * - 'multi': Выводить каждый CSS-файл отдельно в формате имени файла `${originFile}-[hash]`
   * - 'single': Объединить несколько CSS-файлов в один выходной файл с именем `outFile-merged.css`
   *
   * @default true
   */
  splitCss?: boolean | 'multi' | 'single'
}

Перезапись исходных файлов

Используйте флаг --rewrite, чтобы обновить исходные файлы с применением преобразованных утилит. Это полезно, когда вы хотите применить трансформеры (такие как Группы вариантов или Компиляция классов) непосредственно к вашему коду.

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

Разделение CSS

Когда CSS-файлы включены в определённые шаблоны, используйте флаг --split-css для управления выводом CSS.

• false: Не выводить CSS-файлы
• true: Преобразовать и вывести содержимое сканированных CSS-файлов в outFile
• 'multi': Выводить каждый CSS-файл отдельно в формате имени файла ${originFile}-[hash]
• 'single': Объединить несколько CSS-файлов в один выходной файл с именем outFile-merged.css

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

Пресет по умолчанию

Если файл uno.config.ts не найден, CLI будет использовать пресет по умолчанию. Вы можете указать версию пресета по умолчанию с помощью флага --preset.

• wind4: Использовать preset-wind4.
• wind3: Использовать preset-wind3.

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

Примечание: Эта опция игнорируется, если присутствует файл конфигурации.

ПРЕДУПРЕЖДЕНИЕ

Начиная с версии v66.6.0, @unocss/cli больше не предоставляет пресет по умолчанию. Пользователям необходимо явно указать опцию --preset или настроить пресет в файле конфигурации.

Список доступных параметров см. в документации по конфигурации UnoCSS.

Опции

Опция	Описание
-v, --version	Показать текущую версию UnoCSS
-c, --config [file]	Файл конфигурации
-o, --out-file <file>	Имя выходного файла для сгенерированного файла UnoCSS. По умолчанию uno.css в текущей рабочей директории
--stdout	Записать сгенерированный файл UnoCSS в STDOUT. При этом --watch и --out-file будут проигнорированы
-w, --watch	Указывает, следует ли отслеживать файлы, найденные по glob-шаблону
--preflights	Включить стили preflight
--rewrite	Обновить исходные файлы с применением преобразованных утилит
--write-transformed	Обновить исходные файлы с применением преобразованных утилит (устарело, используйте --rewrite)
-m, --minify	Минифицировать сгенерированный CSS
--debug	Включить режим отладки
--split-css [mode]	Выводить ли CSS-файлы, найденные по шаблонам, в outFile. Опции: true, false, multi, single
--preset [default-preset]	Переключить пресет wind3 или wind4 в качестве пресета по умолчанию. Если вы настроили uno.config, эта опция будет проигнорирована.
-h, --help	Показать доступные опции CLI