⇨ Laravel の 記事の目次はこちら

Laravel で app.js や app.css が 404NOT FOUND するときの解決方法についてと、なぜ解決できるのか Laravel の仕組みについて解説する記事です。

関連記事:Laravel、Vue.js、Vue-Router、Vuetify の環境構築

結論

多くの場合は、コマンドで

npm run watch

と打てば解決すると思います。

それでも解決しない時

public に CSS や JS ファイルがないと NotFound になります

Laravel の asset()関数は、public/を基準にファイルを見ています。

つまり、

{{ asset('/css/app.css') }}

のような書き方は

public 配下にある CSS を読み込んでいるのです。

resources にも CSS や JS のディレクトリがあるので混同する

さきほど言った通り、public にちゃんと CSS や、JS ファイルがあれば４０４になることはありません。

しかし、Laravel は初期状態では public に CSS や JS ファイルはありません。

その代わりに、

resources ディレクトリに CSS や JS ファイルが存在しています。

laravel-mix について

さっきコマンドした、npm run watch とは？

resources にある CSS や JS ファイルを元に、public に JS や CSS ファイルを生成するコマンドになります。

（生成するだけでなく、resources の変更があるたびに新しいファイルに作り変えてくれる開発用のコマンドです）

そのビルドの設定を webpack.mix.js に書く必要がある

Laravel のプロジェクトを作成した時、通常最初から

webpack.mix.jp

というファイルがあります。そのファイルには最初から

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

mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css");

このように設定が書かれています。

これは、resources/js/app.js に書かれている内容をビルドして、public/js/app.js に出力する。

同様に、resources/sass/app.scss に書かれている内容をビルドして、public/css/app.css に出力する。

という意味になります。

この記述があるため、

npm run watch

をしたら、public にファイルが生成されることになるわけです。

npm run dev も似たような結果になります

npm run dev

これは、resources の変更を読み取ってビルドし直すということがなく、とりあえず一回ビルドするみたいなコマンドです。

まとめ

なぜ app.js や app.css が４０４になるのか？という Laravel 学び始めた人が一番最初に通る道ですが、補足で LaravelMix に関して触れておけばあとあと楽になるのかな？と思って、書いてみました！

苦情・意見は Twitter の DM にお願いします。

それでは！