UnoCSS の設定
設定
設定は UnoCSS を強力にするものです。
- ルール - アトミック CSS ユーティリティを定義します。
- ショートカット - 複数のルールを1つの省略形に組み合わせます。
- テーマ - テーマ変数を定義します。
- バリアント - ルールにカスタム規約を適用します。
- エクストラクター - ユーティリティの使用状況をどこでどのように抽出するかを定義します。
- プリフライト - グローバルな raw CSS を定義します。
- レイヤー - 各ユーティリティレイヤーの順序を定義します。
- プリセット - 一般的なユースケースのための事前定義された設定。
- トランスフォーマー - ソースコードを処理して規約をサポートするコードトランスフォーマー。
- オートコンプリート - カスタマイズされたオートコンプリート候補を定義します。
オプション
rules
- 型:
Rule<Theme>[]
CSS ユーティリティを生成するためのルール。後に出現するほど優先度が高くなります。
shortcuts
- 型:
UserShortcuts<Theme>
Windi CSS のショートカットに似ており、既存のものを組み合わせることで新しいユーティリティを作成できます。後に出現するほど優先度が高くなります。
theme
- 型:
Theme
ルール間で共有される設定のためのテーマオブジェクト。
extendTheme
- 型:
Arrayable<ThemeExtender<Theme>>カスタム関数はテーマオブジェクトを変更します。
新しいテーマオブジェクトを返して、元のオブジェクトを完全に置き換えることも可能です。
variants
- 型:
Variant<Theme>[]
セレクターを前処理するバリアントで、CSSオブジェクトを書き換える機能があります。
extractors
- 型:
Extractor[]
ソースファイルと出力可能なクラス/セレクターを処理するためのエクストラクター。言語を認識できます。
preflights
- 型:
Preflight<Theme>[]
raw CSS の挿入。
layers
- 型:
Record<string, number>
レイヤーの順序。デフォルトは0。
outputToCssLayers
- 型:
boolean | UseCssLayersOptions - デフォルト:
false
レイヤーを CSS カスケードレイヤーに出力します。
cssLayerName
- 型:
(internalLayer: string) => string | undefined | null
内部レイヤーを出力する CSS レイヤーの名前を指定します（サブレイヤーも可、例：「mylayer.mysublayer」）。
undefined を返すと、内部レイヤー名が CSS レイヤー名として使用されます。null を返すと、内部レイヤーは CSS レイヤーに出力されません。
sortLayers
- 型:
(layers: string[]) => string[]
レイヤーをソートするためのカスタム関数。
presets
- 型:
(PresetOrFactory<Theme> | PresetOrFactory<Theme>[])[]
一般的なユースケースのための事前定義された設定。
transformers
- 型:
SourceCodeTransformer[]
ソースコードに対するカスタムトランスフォーマー。
blocklist
- 型:
BlocklistRule[]
デザインシステムのセレクターを除外するためのルール（可能性を絞り込むため）。warnExcluded オプションを組み合わせることで、誤った使用を特定することもできます。
safelist
- 型:
string[]
常に含まれるユーティリティ。
preprocess
- 型:
Arrayable<Preprocessor>
入力ユーティリティを前処理し、偽の値を返して除外します。
postprocess
- 型:
Arrayable<Postprocessor>
生成された utils オブジェクトを後処理します。
separators
- 型:
Arrayable<string> - デフォルト:
[':', '-']
バリアントセパレーター。
extractorDefault
- 型:
Extractor | null | false - デフォルト:
import('@unocss/core').defaultExtractor
常に適用されるデフォルトのエクストラクター。デフォルトでは、ソースコードを空白と引用符で分割します。
プリセットまたはユーザー設定で置き換えることができます。デフォルトのエクストラクターは1つしか存在できず、後のものが前のものを上書きします。
デフォルトのエクストラクターを無効にするには、null または false を渡します。
autocomplete
オートコンプリートの追加オプション。
templates
- 型:
Arrayable<AutoCompleteFunction | AutoCompleteTemplate>
オートコンプリート候補を提供するためのカスタム関数/テンプレート。
extractors
- 型:
Arrayable<AutoCompleteExtractor>
可能なクラスを拾い上げ、クラス名スタイルの候補を正しい形式に変換するためのカスタムエクストラクター。
shorthands
- 型:
Record<string, string | string[]>
オートコンプリート候補を提供するためのカスタムショートハンド。値が配列の場合、| で結合され、() で囲まれます。
content
ユーティリティの使用状況として抽出されるソースのオプション。
サポートされるソース
filesystem- ファイルシステムから抽出plain- プレーンなインラインテキストから抽出pipeline- Vite や Webpack などのビルドツールの変換パイプラインから抽出
各ソースから抽出された使用状況は、**マージ**されます。
filesystem
- 型:
string[] - デフォルト:
[]
他のコンテンツソースに加えて、ファイルシステムから抽出するグローブパターン。
開発モードでは、ファイルが監視され、HMR がトリガーされます。
inline
- 型:
string | { code: string; id?: string } | (() => Awaitable<string | { code: string; id?: string }>)) []
抽出するインラインテキスト。
pipeline
ビルドツールの変換パイプラインから特定のモジュールを抽出するかどうかを決定するためのフィルター。
現在、Vite と Webpack の統合でのみ機能します。
無効にするには false を設定します。
include
- 型:
FilterPattern - デフォルト:
[/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/]
抽出されるファイルをフィルタリングするパターン。正規表現と `picomatch` グローブパターンをサポートします。
デフォルトでは、`.ts` と `.js` ファイルは抽出されません。
exclude
- 型:
FilterPattern - デフォルト:
[/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/]
抽出されないファイルをフィルタリングするパターン。正規表現と `picomatch` グローブパターンをサポートします。
デフォルトでは、`node_modules` と `dist` も抽出されます。
configResolved
- 型:
(config: ResolvedConfig) => void
解決済みの設定を変更するためのフック。
最初にプリセットが実行され、次にユーザー設定が実行されます。
configFile
- 型:
string | false
設定ファイルから読み込みます。
無効にするには false を設定します。
configDeps
- 型:
string[]
設定の再読み込みもトリガーするファイルのリスト。
cli
UnoCSS CLI オプション。
entry
- 型:
Arrayable<CliEntryItem>
UnoCSS cli エントリポイント。
patterns
- 型:
string[]
ファイルシステムから抽出するグローブパターン。
outFile
- 型:
string
出力ファイルパス。
shortcutsLayer
- 型:
string - デフォルト:
'shortcuts'
ショートカットのレイアウト名。
envMode
- 型:
'dev' | 'build' - デフォルト:
'build'
環境モード。
details
- 型:
boolean
デバッグ/検査のために内部詳細を公開します。
warn
- 型:
boolean - デフォルト:
true
ブロックリストに一致するセレクターが存在する場合、警告を出力します。