---
title: "導入方法"
id: "guide:installation"
---

## インストール

<CodeTabs
  items={[
    {
      name: "npm",
      code:
        pm.install("npm", "@camome/system @camome/core") +
        "\n" +
        pm.installDev("npm", "@camome/utils"),
      language: "bash",
    },
    {
      name: "yarn",
      code:
        pm.install("yarn", "@camome/system @camome/core") +
        "\n" +
        pm.installDev("yarn", "@camome/utils"),
      language: "bash",
    },
    {
      name: "pnpm",
      code:
        pm.install("pnpm", "@camome/system @camome/core") +
        "\n" +
        pm.installDev("pnpm", "@camome/utils"),
      language: "bash",
    },
  ]}
/>

## バンドラーの設定

Camome の配布コードは JavaScript + [CSS Modules](https://github.com/css-modules/css-modules) in [Sass](https://sass-lang.com/) で書かれています。`*.module.scss` は JavaScript から直接 `import` できるコードではないため、Webpack や Rollup のプラグインやローダーを設定する必要があります。

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

<DocLinkCardGrid
  links={[
    { id: "integrations:next" },
    { id: "integrations:astro" },
    { id: "integrations:vite" },
    { id: "integrations:cdn" },
  ]}
/>

## CSS のインポート

CSS のインポートの順番には意味があります。Camome はテーマファイル内で [CSS Cascade Layers](https://developer.mozilla.org/ja/docs/Web/CSS/@layer)の優先順位を宣言しているため、**テーマファイルが最初にインポートされるようにしてください。**

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

```tsx:_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;
```

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

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

<DocLinkCardGrid links={[{ id: "guide:theming" }]} />

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

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

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

<Message status="warn">
  `data-theme` 属性を付与しないとテーマが適用されないので、この作業は必須です。
</Message>

<DocLinkCardGrid links={[{ id: "guide:theming" }]} />

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

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

```tsx:個別インポート
import { Button } from "@camome/core/Button";
import { Input } from "@camome/core/Input";
```

```tsx:一括インポート
import { Button, Input } from "@camome/core";
```

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

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

## VSCode 拡張

[CSS Variable Autocomplete](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables) をインストールすることで CSS 変数のオートコンプリートを有効化できます。

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

<Message status="warn">
  カスタムテーマを使用する場合はファイルパスを変更してください。
</Message>
