UnoCSSの設定
設定
設定はUnoCSSを強力にする要素です。
- ルール - アトミックCSSユーティリティを定義
- ショートカット - 複数のルールを単一の省略形に結合
- テーマ - テーマ変数を定義
- バリアント - ルールにカスタム規則を適用
- エクストラクター - ユーティリティの使用箇所と抽出方法を定義
- プリフライト - グローバルな生の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>[]
生の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>
生成されたユーティリティオブジェクトを後処理します。
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- ファイルシステムから抽出inline- プレーンテキストから抽出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 entry points.
patterns
- 型:
string[]
Glob patterns to extract from the file system.
outFile
- 型:
string
Output file path.
shortcutsLayer
- 型:
string - デフォルト:
'shortcuts'
Layout name of shortcuts.
envMode
- 型:
'dev' | 'build' - デフォルト:
'build'
Environment mode.
details
- 型:
boolean
Expose internal details for debugging / inspecting.
warn
- 型:
boolean - デフォルト:
true
Emit warning when matched selectors are presented in blocklist.