Skip to content

CLI

L'interface en ligne de commande pour UnoCSS : @unocss/cli.

  • 🍱 Adapté aux backends traditionnels comme Laravel ou Kirby
  • 👀 Mode watch inclus
  • 🔌 Prend en charge les configurations personnalisées via uno.config.ts

Installation

Ce package est inclus avec le package unocss :

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

Vous pouvez aussi installer le package autonome :

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

INFO

Si vous ne trouvez pas le binaire (par exemple avec pnpm et seulement unocss est installé), vous devrez explicitement installer le package autonome @unocss/cli.

Utilisation

Vous pouvez aussi passer plusieurs motifs glob à @unocss/cli :

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

Exemple de configuration de package :

INFO

Assurez-vous d'ajouter des guillemets échappés à vos motifs glob dans les scripts npm.

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

Développement

Ajoutez l'option --watch (ou -w) pour activer la surveillance des changements de fichiers :

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

Production

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

Le fichier final uno.css sera généré dans le répertoire courant par défaut.

Fonctionnalités intégrées

Configurations

Créez un fichier de configuration uno.config.js ou uno.config.ts à la racine de votre projet pour personnaliser UnoCSS.

ts
import { defineConfig } from 'unocss'

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

interface CliEntryItem {
  /**
   * Motifs glob à matcher
   */
  patterns: string[]
  /**
   * Nom du fichier de sortie pour le fichier UnoCSS généré
   */
  outFile: string
}

Pour la liste des options, consultez la documentation Configurations UnoCSS.

Options

Options
-v, --versionAffiche la version actuelle de UnoCSS
-c, --config-file <file>Fichier de configuration
-o, --out-file <file>Nom du fichier de sortie pour le fichier UnoCSS généré. Par défaut : uno.css dans le dossier courant
--stdoutÉcrit le fichier UnoCSS généré sur STDOUT. Ignore --watch et --out-file
-w, --watchIndique si les fichiers trouvés par le motif glob doivent être surveillés
--preflightsActive les styles preflight
--write-transformedMet à jour les fichiers source avec les utilitaires transformés
-m, --minifyMinifie le CSS généré
-h, --helpAffiche les options CLI disponibles

Released under the MIT License.