Customize
lism-css パッケージは、読み込むCSS、コンポーネントが受け付ける props、出力されるクラスをカスタマイズできます。カスタマイズの入口は大きく次の4つです。目的に応じて該当ページへ進んでください。
カスタマイズの入口
| やりたいこと | 使う方法 | ページ |
|---|---|---|
@layer のオン / オフや full.css など、読み込むビルド済みCSSを切り替えたい | CSSファイルの差し替え / isFullMode | CSSビルドの選択 |
| コンポーネントの props / tokens / traits を増やしたい（Vite / Astro 向けの推奨パス） | lism.config.js + @lism-css/plugin | lism.config.js でのカスタマイズ |
| SCSSだけで、出力されるクラスやブレイクポイントを調整したい（Vite / Astro プラグインを使わない構成向け） | $breakpoints / $props などのSCSS変数を上書き | SCSS でのカスタマイズ |
| 本番CSSから未使用クラスを削除して軽量化したい | purge プラグイン | CSS Purge |
Vite / Astro を使っている場合は、@lism-css/plugin の統合プラグイン1つで「lism.config.js の読み込み・CSSへの自動反映・型の自動生成」がまとめて有効になります。まずは lism.config.js でのカスタマイズ を起点にするのがおすすめです。