CLI

Command line interface สำหรับ UnoCSS: @unocss/cli

• 🍱 เหมาะสำหรับ backends แบบดั้งเดิมเช่น Laravel หรือ Kirby
• 👀 รวม Watch mode
• 🔌 รองรับ custom configurations ผ่าน uno.config.ts

การติดตั้ง

แพ็กเกจนี้มาพร้อมกับแพ็กเกจ unocss:

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

คุณยังสามารถติดตั้ง 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

หากคุณไม่พบ binary (เช่น กับ pnpm และมีเฉพาะ unocss ติดตั้ง) คุณจะต้องติดตั้ง standalone package @unocss/cli โดยเฉพาะ

การใช้งาน

คุณสามารถส่ง multiple glob patterns ไปยัง @unocss/cli:

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

ตัวอย่าง package configuration:

INFO

ตรวจสอบให้แน่ใจว่าได้เพิ่ม escaped quotes ใน npm script glob patterns ของคุณ

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

Development

เพิ่ม flag --watch (หรือ -w) เพื่อเปิดใช้งานการเฝ้าดูการเปลี่ยนแปลงไฟล์:

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

Production

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

ไฟล์ uno.css สุดท้ายจะถูกสร้างไปยังไดเรกทอรีปัจจุบันโดยค่าเริ่มต้น

Built-in features

Configurations

สร้างไฟล์ configuration uno.config.js หรือ uno.config.ts ที่ root-level ของโปรเจคของคุณเพื่อปรับแต่ง UnoCSS

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 configurations

Options

Options
-v, --version	แสดงเวอร์ชันปัจจุบันของ UnoCSS
-c, --config-file <file>	Config file
-o, --out-file <file>	ชื่อไฟล์ output สำหรับไฟล์ UnoCSS ที่สร้างขึ้น ค่าเริ่มต้นคือ uno.css ในไดเรกทอรีทำงานปัจจุบัน
--stdout	เขียนไฟล์ UnoCSS ที่สร้างขึ้นไปยัง STDOUT จะทำให้ --watch และ --out-file ถูกละเลย
-w, --watch	ระบุว่าไฟล์ที่พบโดย glob pattern ควรถูกเฝ้าดู
--preflights	เปิดใช้งาน preflight styles
--write-transformed	อัปเดตไฟล์ต้นฉบับด้วย transformed utilities
-m, --minify	Minify generated CSS
-h, --help	แสดง CLI options ที่มี