UnoCSSの設定

設定

設定はUnoCSSを強力にする要素です。

• ルール - アトミックCSSユーティリティを定義します。
• ショートカット - 複数のルールを1つのショートハンドにまとめます。
• テーマ - テーマ変数を定義します。
• バリアント - ルールにカスタム規約を適用します。
• エクストラクター - ユーティリティの使用場所と方法を定義します。
• プレフライト - グローバルな生のCSSを定義します。
• レイヤー - 各ユーティリティレイヤーの順序を定義します。
• プリセット - 一般的なユースケースのための事前定義された設定。
• トランスフォーマー - 規約をサポートするためのユーザーソースコードへのコードトランスフォーマー。
• オートコンプリート - カスタマイズされたオートコンプリートの提案を定義します。

オプション

rules

• Type: Rule<Theme>[]

CSSユーティリティを生成するためのルール。後のエントリほど優先度が高くなります。

shortcuts

• Type: UserShortcuts<Theme>

Windi CSSのショートカットに似ており、既存のユーティリティを組み合わせて新しいユーティリティを作成できます。後のエントリほど優先度が高くなります。

theme

• Type: Theme

ルール間で共有される設定のためのテーマオブジェクト。

extendTheme

• Type: Arrayable<ThemeExtender<Theme>> カスタム関数がテーマオブジェクトを変更します。

元のテーマオブジェクトを完全に置き換えるために新しいテーマオブジェクトを返すことも可能です。

variants

• Type: Variant<Theme>[]

セレクタを前処理し、CSSオブジェクトを書き換える能力を持つバリアント。

extractors

• Type: Extractor[]

ソースファイルを処理し、可能なクラス/セレクタを出力するエクストラクター。言語に対応可能。

preflights

• Type: Preflight<Theme>[]

生のCSSのインジェクション。

layers

• Type: Record<string,>

レイヤーの順序。デフォルトは0。

outputToCssLayers

• Type: boolean | UseCssLayersOptions
• Default: false

レイヤーをCSSカスケードレイヤーに出力します。

cssLayerName

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

内部レイヤーを出力するCSSレイヤーの名前を指定します（例: "mylayer.mysublayer" のようなサブレイヤーも可能）。

undefinedが返された場合、内部レイヤー名がCSSレイヤー名として使用されます。 nullが返された場合、内部レイヤーはCSSレイヤーに出力されません。

sortLayers

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

レイヤーをソートするためのカスタム関数。

presets

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

一般的なユースケースのための事前定義された設定。

transformers

• Type: SourceCodeTransformer[]

ソースコードへのカスタムトランスフォーマー。

blocklist

• Type: BlocklistRule[]

デザインシステムのためにセレクタを除外するルール（可能性を絞り込むため）。warnExcludedオプションを組み合わせることで誤った使用を特定するのに役立ちます。

safelist

• Type: string[]

常に含まれるユーティリティ。

preprocess

• Type: Arrayable<Preprocessor>

受信するユーティリティを前処理し、偽の値を返して除外します。

postprocess

• Type: Arrayable<Postprocessor>

生成されたユーティルオブジェクトを後処理します。

separators

• Type: Arrayable<string>
• Default: [':', '-']

バリアントセパレーター。

extractorDefault

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

常に適用されるデフォルトのエクストラクター。デフォルトではソースコードを空白と引用符で分割します。

プリセットやユーザー設定で置き換えられる可能性があり、デフォルトのエクストラクターは1つだけ存在できます。後のものが前のものを上書きします。

デフォルトのエクストラクターを無効にするにはnullまたはfalseを渡します。

autocomplete

オートコンプリートのための追加オプション。

templates

• Type: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

オートコンプリートの提案を提供するためのカスタム関数/テンプレート。

extractors

• Type: Arrayable<AutoCompleteExtractor>

可能なクラスをピックアップし、クラス名スタイルの提案を正しい形式に変換するためのカスタムエクストラクター。

shorthands

• Type: Record<string,>

オートコンプリートの提案を提供するためのカスタムショートハンド。値が配列の場合、|で結合され()で囲まれます。

content

ユーティリティ使用として抽出されるソースのオプション。

サポートされるソース:

• filesystem - ファイルシステムから抽出
• inline - プレーンなインラインテキストから抽出
• pipeline - ViteやWebpackなどのビルドツールの変換パイプラインから抽出

各ソースから抽出された使用は統合されます。

filesystem

• Type: string[]
• Default: []

ファイルシステムから抽出するためのグロブパターン。他のコンテンツソースに加えて。node_modulesはデフォルトで無視されますが、パスにnode_modulesが含まれている場合はunocssがスキャンします。

開発モードでは、ファイルが監視され、HMRをトリガーします。

inline

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

抽出されるインラインテキスト。

pipeline

ビルドツールの変換パイプラインから特定のモジュールを抽出するかどうかを決定するフィルター。

現在、ViteとWebpackの統合でのみ動作します。

無効にするにはfalseを設定します。

include

• Type: FilterPattern
• Default: [/\.(vue|svelte|[jt]sx|vine.ts|mdx?|astro|elm|php|phtml|html)($|\?)/]

抽出されるファイルをフィルタリングするパターン。正規表現とpicomatchグロブパターンをサポートします。

デフォルトでは、.tsと.jsファイルは抽出されません。

exclude

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

抽出されないファイルをフィルタリングするパターン。正規表現とpicomatchグロブパターンをサポートします。

デフォルトでは、node_modulesとdistも抽出されます。

configResolved

• Type: (config: ResolvedConfig) => void

解決された設定を変更するためのフック。

最初にプリセットが実行され、その後にユーザー設定が実行されます。

configFile

• Type: string | false

設定ファイルから読み込みます。

無効にするにはfalseを設定します。

configDeps

• Type: string[]

設定のリロードをトリガーするファイルのリスト。

cli

UnoCSS CLIオプション。

entry

• Type: Arrayable<CliEntryItem>

UnoCSS CLIのエントリーポイント。

patterns

• Type: string[]

ファイルシステムから抽出するためのグロブパターン。

outFile

• Type: string

出力ファイルパス。

shortcutsLayer

• Type: string
• Default: 'shortcuts'

ショートカットのレイアウト名。

envMode

• Type: 'dev' | 'build'
• Default: 'build'

環境モード。

details

• Type: boolean

デバッグ/検査のために内部の詳細を公開します。

warn

• Type: boolean
• Default: true

ブロックリストに一致するセレクタが存在する場合に警告を発します。