Laravel 8 + JetstreamでCSSが読み込まれない問題の解決方法

2024-02-16 13:28 Laravel Jetstream CSS

  1. パブリックディレクトリのパーミッションを確認する: まず最初に、Laravelプロジェクトのパブリックディレクトリのパーミッションを確認しましょう。パブリックディレクトリ内のファイルには適切なパーミッションが必要です。一般的には、755または775のパーミッションが推奨されます。

  2. CSSのパスが正しいか確認する: CSSファイルのパスが正しいかどうかを確認しましょう。Laravelでは、publicディレクトリ内にcssディレクトリを作成し、CSSファイルを配置するのが一般的です。例えば、public/css/style.cssというパスにCSSファイルがある場合、HTMLファイル内で以下のように指定します:

<link rel="stylesheet" href="{{ asset('css/style.css') }}">
  1. ビルド済みのアセットを確認する: Laravel Mixを使用してCSSをコンパイルしている場合、ビルド済みのアセットが存在するか確認しましょう。Laravel Mixは、resources/cssディレクトリ内のソースファイルをビルドしてpublic/cssディレクトリに配置します。もしビルド済みのアセットが存在しない場合、以下のコマンドを実行して再ビルドしてみてください:
npm run dev
  1. キャッシュをクリアする: Laravelでは、アセットの変更が反映されない場合があります。この場合、キャッシュをクリアする必要があります。以下のコマンドを実行してキャッシュをクリアしましょう:
php artisan cache:clear
  1. ブラウザのキャッシュをクリアする: 一部のブラウザはCSSファイルをキャッシュしてしまうことがあります。ブラウザのキャッシュをクリアしてから再度ページを読み込んでみてください。通常、ショートカットキー「Ctrl + Shift + R」を押すことでキャッシュをクリアできます。