導入方法 | Camome UI

インストール

npm install @camome/system @camome/core
npm install --save-dev @camome/utils

バンドラーの設定

Camome の配布コードは JavaScript + CSS Modules in Sass で書かれています。*.module.scss は JavaScript から直接 import できるコードではないため、Webpack や Rollup のプラグインやローダーを設定する必要があります。

主なフレームワークごとの設定方法は以下を参照してください:

CSS のインポート

CSS のインポートの順番には意味があります。Camome はテーマファイル内で CSS Cascade Layersの優先順位を宣言しているため、テーマファイルが最初にインポートされるようにしてください。

例えば Next.js では次のように実装します:

_app.tsx

import "@camome/system/dist/theme.css";
// または: import "@/styles/generated-theme.css"
import "@/styles/globals.css";
import { Button } from "@camome/core/Button";
// または: import { Button } from "@camome/core"

function App() {
  return <Button>Button</Button>;
}

export default App;

globals.css

/* Buttonのスタイルをオーバーライド
   (@layerの外側は内側より優先される) */
.Button {
  border-radius: 999px;
}

CSS のインポートが可能なファイルや、順番が保証されるかどうかはバンドラーやフレームワークに依存するので、うまく動かない場合は確認してみてください。

テーマのカスタマイズ

`data-theme` 属性でテーマを指定

Camome は light と dark テーマに対応しており、 <html> タグの data-theme 属性で指定することができます。

index.html

<!DOCTYPE html>
<html data-theme="<light または dark>">
  <!-- コンテンツ -->
</html>

data-theme 属性を付与しないとテーマが適用されないので、この作業は必須です。

テーマのカスタマイズ

コンポーネントのインポート方法

@camome/core からコンポーネントをインポートする方法は以下の二通りです:

個別インポート

import { Button } from "@camome/core/Button";
import { Input } from "@camome/core/Input";

一括インポート

import { Button, Input } from "@camome/core";

基本的には個別インポートの方が望ましいですが、一括インポートでも問題ありません。

一括インポートの場合、（少なくとも）Next.js と Vite では開発サーバーやビルド時のパフォーマンスが若干落ちるかもしれません。しかしプロダクション環境には（ツリーシェイキングされているので）影響はないと思います。
個別インポートの方が IDE の自動補完が効きづらいかもしれません。
個別インポートの方が記述が冗長になります。

VSCode 拡張

CSS Variable Autocomplete をインストールすることで CSS 変数のオートコンプリートを有効化できます。

.vscode/settings.json

{
  "cssVariables.lookupFiles": ["node_modules/@camome/system/dist/theme.css"]
}

カスタムテーマを使用する場合はファイルパスを変更してください。