この記事を書いたきっかけ
Laravelでscssを使ってフロントエンド部分の実装をしていた。
「npm run watch」を実行しながら変更を確認していた。
が、変更箇所が反映されないことが多かった。
主は調べる→試す→撃沈 という流れを散々繰り返して苦しんだので、
「何をやっても変更が反映されない！」とお悩みの方の力になれたら嬉しいです。
試したこと
解決には至らなかった方法
Laravel キャッシュクリア系コマンドなど
いつもお世話になっていた上記の記事を参考にほとんど試しました。
今まではだいたいこれで解決していたのですが...今回ばかりはうまくいきませんでした。
試したコマンド一覧
$ php artisan cache:clear
$ php artisan config:clear
$ php artisan route:clear
$ php artisan view:clear
$ composer dump-autoload
有名なこの辺りを試したものの、全滅...
解決した方法
Laravel 5.4 アセットのコンパイル(Laravel Mix)
公式サイトの方法を実施。
サイト内の「バージョン付け／キャッシュ対策」の項目を参照。
bladeファイルの変更
変更前
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
変更後
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
{{ asset(...) }}としていた部分を、以下のように{{ mix(...) }}に変更
webpack.mix.jsの変更
末尾に追加
if (mix.inProduction()) {
mix.version();
}
ターミナルで以下を実行
$ npm run production
上記方法を実行することで、無事scssファイルの変更が反映された。
以降はnpm run watchを実施した際もブラウザのリロードで変更が確認できるようになった。
もしまた今回のようにキャッシュ問題が発生した際はnpm run productionコマンドを実施することにする。
最後に
キャッシュ問題を解決するのは結構手がかかる！
そして解決するたびにこうやって書き残すことが大切だと感じた。
以上、同じような問題で悩んでいる方の力になれたなら嬉しいです。