【Laravel】CSSを読み込む方法

Laravelは、PHPで構築された強力なフレームワークであり、効率的にウェブアプリケーションを開発するための多くの機能を提供しています。本記事では、LaravelプロジェクトでCSSファイルを読み込む方法を紹介します。これには、基本的な方法から、Laravel Mixを使ったより高度な方法までカバーします。

publicディレクトリにCSSファイルを配置
bladeテンプレートファイルでCSSを読み込む
Laravel Mixを使ったCSSのコンパイル
まとめ

publicディレクトリにCSSファイルを配置

Laravelでは、静的なアセット（画像やCSS、JavaScriptファイルなど）をpublicディレクトリに格納します。まず、CSSファイルをpublic/cssディレクトリに保存します。

ファイルの例：

public/
 ├── css/
 │    └── style.css

bladeテンプレートファイルでCSSを読み込む

Laravelのbladeテンプレートを使用して、先ほどpublic/css/style.cssに保存したCSSファイルを読み込みます。

bladeテンプレートファイル（例：resources/views/layouts/app.blade.php）に以下のコードを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravelアプリ</title>

    <!-- CSSファイルを読み込む -->
    <link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- コンテンツ -->
    </div>
</body>
</html>

ここで、{{ asset(‘css/style.css’) }}はpublic/css/style.cssファイルを参照するURLを生成します。これにより、ブラウザが適切なCSSを読み込むことができます。

Laravel Mixを使ったCSSのコンパイル

Laravelでは、Laravel Mixを使って、CSSやJavaScriptのバンドルやコンパイルを簡単に行うことができます。特に、開発中にSassやLessを使用したり、複数のCSSファイルをまとめて最適化する場合に有用です。

CSSファイルをresources/cssに配置

まず、resources/cssディレクトリにCSSファイルを作成します。例えば、resources/css/app.cssというファイルを作成します。

webpack.mix.jsの設定

次に、webpack.mix.jsを編集して、resources/css/app.cssをコンパイルし、public/cssディレクトリに出力するように設定します。

webpack.mix.jsの設定例

const mix = require('laravel-mix');

mix.css('resources/css/app.css', 'public/css');

npm run devでコンパイル

npmを使ってCSSファイルをコンパイルします。以下のコマンドを実行して、resources/css/app.cssをコンパイルし、public/cssに出力します。

npm run dev

コンパイル後、public/css/app.cssというファイルが生成されます。

bladeテンプレートファイルでコンパイルされたCSSを読み込む

最後に、bladeテンプレートでコンパイルされたCSSファイルを読み込みます。mix()関数を使って、正しいURLに変換します。

<link href="{{ mix('css/app.css') }}" rel="stylesheet">

mix()関数は、webpack.mix.jsで設定したファイルパスを正しいURLに変換します。

まとめ

LaravelでCSSを読み込む方法には、主に2つの方法があります。

基本的な方法：publicディレクトリにCSSファイルを配置し、asset()関数で読み込む。
Laravel Mixを使用する方法：resources/cssにCSSを配置し、webpack.mix.jsでコンパイル後、mix()関数で読み込む。

どちらの方法も、Laravelで効率的にCSSを管理するために有効です。特に、複雑なCSSやJavaScriptの管理が必要な場合、Laravel Mixを使う方法が推奨されます。