LaravelでVite(React)とInertiaでCSSを適用させる

LaravelでViteとInertiaを使用し、Reactを使用する場合のCSSの適用方法があいまいだったのでメモしておく。

前提

• すでにプロジェクトは立ち上げ済み
• LaravelでVite(React)とInertia使用
• スターターキットであるBreezeを使用

グローバルCSSの適用

全体に適用させる場合はapp.jsx でCSSファイルをインポートする。

CSSファイルを作成

resources/css/app.css にスタイルを記述します。

CSSファイルをインポート

resources/js/app.jsx に以下のようにインポートします。

import '../css/app.css';

Reactコンポーネント内でのCSS適用

Reactコンポーネント内でCSSを適用する場合も各フォルダにCSSファイルを作成しそれを使用できます。

通常のCSSファイルを作成

resources/css/　以下にCSSファイルを作成し配置するのでも、
resources/js/Components/　ディレクトリの中への配置でもいいと思います。
今回はcomponent.cssファイル作成しresources/js/Components/component.cssで配置しました。

CSSファイルをインポートする

各コンポーネントでCSSモジュールをインポートし、クラス名を適用します。

import './component.css';

import React from 'react';
import './ExampleComponent.css';

const ExampleComponent = () => (
    <div className="example">
        Hello, world!
    </div>
);

export default ExampleComponent;