UnoCSS konfigurieren

Konfiguration

Konfigurationen sind das, was UnoCSS leistungsstark macht.

• Regeln - Definieren Sie Atomic CSS Utilities
• Shortcuts - Kombinieren Sie mehrere Regeln zu einer einzigen Kurzform.
• Theme - Definieren Sie Theme-Variablen.
• Varianten - Wenden Sie benutzerdefinierte Konventionen auf Regeln an.
• Extractors - Definieren Sie, wo und wie die Verwendung von Utilities extrahiert wird.
• Preflights - Definieren Sie globales rohes CSS.
• Ebenen - Definieren Sie die Reihenfolge jeder Utilities-Ebene.
• Presets - Vordefinierte Konfigurationen für gängige Anwendungsfälle.
• Transformer - Code-Transformer für Benutzerquellcode zur Unterstützung von Konventionen.
• Autovervollständigung - Definieren Sie angepasste Autovervollständigungsvorschläge.

Optionen

rules

• Typ: Rule<Theme>[]

Regeln zum Generieren von CSS-Utilities. Spätere Einträge haben höhere Priorität.

shortcuts

• Typ: UserShortcuts<Theme>

Ähnlich wie Windi CSS's Shortcuts, ermöglicht es Ihnen, neue Utilities zu erstellen, indem Sie bestehende kombinieren. Spätere Einträge haben höhere Priorität.

theme

• Typ: Theme

Theme-Objekt für gemeinsame Konfiguration zwischen Regeln.

extendTheme

• Typ: Arrayable<ThemeExtender<Theme>> Benutzerdefinierte Funktionen mutieren das Theme-Objekt.

Es ist auch möglich, ein neues Theme-Objekt zurückzugeben, um das Original vollständig zu ersetzen.

variants

• Typ: Variant<Theme>[]

Varianten, die die Selektoren vorverarbeiten und die Fähigkeit haben, das CSS-Objekt umzuschreiben.

extractors

• Typ: Extractor[]

Extractors zum Verarbeiten der Quelldatei und Ausgeben möglicher Klassen/Selektoren. Kann sprachbewusst sein.

preflights

• Typ: Preflight<Theme>[]

Roh-CSS-Injektionen.

layers

• Typ: Record<string, number>

Ebenen-Reihenfolgen. Standardmäßig 0.

outputToCssLayers

• Typ: boolean | UseCssLayersOptions
• Standard: false

Gibt die Ebenen an CSS Cascade Layers aus.

cssLayerName

• Typ: (internalLayer: string) => string | undefined | null

Gibt den Namen der CSS-Ebene an, zu der die interne Ebene ausgegeben werden soll (kann eine Unterebene sein, z. B. "mylayer.mysublayer").

Wenn undefined zurückgegeben wird, wird der interne Ebenenname als CSS-Ebenenname verwendet. Wenn null zurückgegeben wird, wird die interne Ebene nicht an eine CSS-Ebene ausgegeben.

sortLayers

• Typ: (layers: string[]) => string[]

Benutzerdefinierte Funktion zum Sortieren von Ebenen.

presets

• Typ: (PresetOrFactory<Theme> | PresetOrFactory<Theme>[])[]

Vordefinierte Konfigurationen für gängige Anwendungsfälle.

transformers

• Typ: SourceCodeTransformer[]

Benutzerdefinierte Transformer für den Quellcode.

blocklist

• Typ: BlocklistRule[]

Regeln zum Ausschließen der Selektoren für Ihr Design-System (um die Möglichkeiten einzugrenzen). Die Kombination mit warnExcluded Optionen kann Ihnen auch helfen, falsche Verwendungen zu identifizieren.

safelist

• Typ: string[]

Utilities, die immer enthalten sind.

preprocess

• Typ: Arrayable<Preprocessor>

Vorverarbeiten Sie die eingehenden Utilities, geben Sie einen falschen Wert zurück, um auszuschließen.

postprocess

• Typ: Arrayable<Postprocessor>

Nachverarbeiten Sie das generierte Utils-Objekt.

separators

• Typ: Arrayable<string>
• Standard: [':', '-']

Varianten-Trennzeichen.

extractorDefault

• Typ: Extractor | null | false
• Standard: import('@unocss/core').defaultExtractor

Standard-Extractor, der immer angewendet wird. Standardmäßig teilt er den Quellcode nach Leerzeichen und Anführungszeichen.

Er kann durch Preset oder Benutzerkonfiguration ersetzt werden, nur ein Standard-Extractor kann vorhanden sein, der spätere überschreibt den vorherigen.

Übergeben Sie null oder false, um den Standard-Extractor zu deaktivieren.

autocomplete

Zusätzliche Optionen für die Autovervollständigung.

templates

• Typ: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Benutzerdefinierte Funktionen / Vorlagen, um Autovervollständigungsvorschläge bereitzustellen.

extractors

• Typ: Arrayable<AutoCompleteExtractor>

Benutzerdefinierte Extractors zum Aufnehmen möglicher Klassen und Transformieren von Klassennamen-Style-Vorschlägen in das richtige Format.

shorthands

• Typ: Record<string, string | string[]>

Benutzerdefinierte Kurzformen, um Autovervollständigungsvorschläge bereitzustellen. Wenn Werte ein Array sind, werden sie mit | verbunden und mit () umwickelt.

content

Optionen für Quellen, die als Utilities-Verwendungen extrahiert werden sollen.

Unterstützte Quellen:

• filesystem - Extrahieren aus dem Dateisystem
• inline - Extrahieren aus Inline-Text
• pipeline - Extrahieren aus der Transformations-Pipeline der Build-Tools, wie Vite und Webpack

Die Verwendung, die aus jeder Quelle extrahiert wird, wird zusammengeführt.

filesystem

• Typ: string[]
• Standard: []

Glob-Muster zum Extrahieren aus dem Dateisystem, zusätzlich zu anderen Inhaltsquellen.

Im Dev-Modus werden die Dateien überwacht und lösen HMR aus.

inline

• Typ: string | { code: string; id?: string } | (() => Awaitable<string | { code: string; id?: string }>)) []

Inline-Text, der extrahiert werden soll.

pipeline

Filter, um zu bestimmen, ob bestimmte Module aus der Transformations-Pipeline der Build-Tools extrahiert werden sollen.

Funktioniert derzeit nur für Vite- und Webpack-Integration.

Setzen Sie false, um zu deaktivieren.

include

• Typ: FilterPattern
• Standard: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/]

Muster, die die zu extrahierenden Dateien filtern. Unterstützt reguläre Ausdrücke und picomatch Glob-Muster.

Standardmäßig werden .ts und .js Dateien NICHT extrahiert.

exclude

• Typ: FilterPattern
• Standard: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/]

Muster, die die NICHT zu extrahierenden Dateien filtern. Unterstützt reguläre Ausdrücke und picomatch Glob-Muster.

Standardmäßig werden auch node_modules und dist extrahiert.

configResolved

• Typ: (config: ResolvedConfig) => void

Hook zum Ändern der aufgelösten Konfiguration.

Zuerst laufen Presets und dann die Benutzerkonfiguration.

configFile

• Typ: string | false

Laden Sie aus Konfigurationsdateien.

Setzen Sie false, um zu deaktivieren.

configDeps

• Typ: string[]

Liste von Dateien, die auch Konfigurations-Neuladen auslösen.

cli

UnoCSS CLI-Optionen.

entry

• Typ: Arrayable<CliEntryItem>

UnoCSS CLI-Einstiegspunkte.

patterns

• Typ: string[]

Glob-Muster zum Extrahieren aus dem Dateisystem.

outFile

• Typ: string

Ausgabedateipfad.

shortcutsLayer

• Typ: string
• Standard: 'shortcuts'

Layout-Name der Shortcuts.

envMode

• Typ: 'dev' | 'build'
• Standard: 'build'

Umgebungsmodus.

details

• Typ: boolean

Interne Details für Debugging / Inspektion freigeben.

warn

• Typ: boolean
• Standard: true

Warnung ausgeben, wenn übereinstimmende Selektoren in der Blocklist vorhanden sind.