Heroku更新後、CSSが反映されません。

Question

プログラミング初心者です。
Cloud9を利用し、laravelでアプリ開発を進めております。

ファイル編集後、ローカルで動作することを確認し、
「 $git push heroku master 」を行ったところ、
htmlは更新されましたが、cssが反映されていませんでした。
cssは、Laravel Mix でコンパイルしたものを読み込んでおります。

エラーメッセージ

デベロッパーツールのConsoleタブに、
GET https://xxx.herokuapp.com/css/home.css?id=ec72f836c8dd43ec9e22 net::ERR_ABORTED 404 (Not Found)
といったエラーエッセージが表記されています。

試したこと

①webpack.mix.jsに、if文を追加。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/home.scss', 'public/css')
    //上記のように、各ページごとのscssファイルパスが複数記述されています
    .version()

    .options({ processCssUrls: false });

//以下を追加
if (mix.inProduction()) {
    mix.version();
}

②ターミナルにて、以下コマンドを実行。

$ npm run production

③viewファイルを修正。

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

<!-- 修正前 -->
<!-- <link href="{{ secure_asset('css/app.css') }}" rel="stylesheet"> -->

今回、bladeテンプレートを使用しているので、
ヘッダー用のviewファイルで@yield('css')とし、
各ページのファイルで

@section('css')
  <link href="{{ mix('css/home.css') }}" rel="stylesheet">
@endsection

といった形で読み込んでおります。

④ローカル環境での動作確認後、Heroku更新。

$ git add .
$ git commit -m "コミットメッセージ"
$ git push heroku master

その後「 $heroku open 」を行い、アプリをブラウザ表示させましたが、
cssは反映されず、リロードを行っても変化はありませんでした。

一番初めにデプロイをした際には問題は無かったのですが、
２回目以降、反映されなくなりました。

ちなみに、
初めは、全てのページのスタイルを １つのcssファイルから読み込んでおりました。
２回目から、各ページのcssファイルを@sectionで読み込むように変更したので、１回目と２回目の間で新しいファイルがたくさん作成されています。

色々と調べてみたのですが、自分では解決できなかったので、
何が原因と考えられるのか、ヒントを頂けましたら嬉しいです。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Lalavel 5.8.38
GitHubも利用していますが、Herokuと連携はしておりません。

Comments

[Lulucom]

Chromeをお使いならDevTools（デベロッパーツール）のConsoleタブに、何かエラーは出ていないでしょうか？質問へ追記しましょう。

[miyuho]

ご指摘ありがとうございます！
Consoleタブのエラーメッセージを追記いたしました。

[Lulucom]

ありがとうございます。Not Foundはファイルが見つからなかったことを示していますが、どのファイルかの情報も重要です。エラーに載っていると思いますので追記をお願いします。

[miyuho]

失礼いたしました。ファイルも合わせて追記いたしました。
よろしくお願いいたします。

[Lulucom]

ありがとうございます。ドメイン名の部分はxxxとかで適当に消していただいて大丈夫ですよ。
Laravel Mixで生成された public/css/home.css ファイルをGitにコミットできてなかった、ということはありませんか？

[miyuho]

ありがとうございます。修正いたしました。
確認致しましたところ、ご指摘の通り、コミットに失敗していたようで、
GitHubを見ても、public/css直下の新規ファイルが、ひとつもございませんでした。
改めて「$ git add .」「$ git commit」とし、push 致しましたが、
コミットするものは何もなく、最新であると、言われてしまいました。
新しく作成されたファイルをコミットさせるためには、どのように対処をすればよろしいのでしょうか...
知識不足で申し訳ございません...

[Lulucom]

.gitignoreファイルとかに書かれてしまっていてGitに無視されている、ということはありませんか？
git statusコマンドの結果でpublic/css/home.cssは出てきますか？

[miyuho]

.gitignoreファイルが原因でした！
ファイル編集後、更新いたしましたら、無事、本番環境にもCSSが反映されました。
丁寧にご対応いただきまして、本当にありがとうございました！

ちなみに、
同じ public/css直下にあるファイルで、
新規ファイルではないもの (app.cssなど) はコミットできていたようです。これは何故でしょうか？
２つ目の質問になってしまうようでしたら、また別に投稿しますが、
この場でお答えいただけるようでしたら、ぜひ教えて頂きたいです。

[Lulucom]

どのディレクトリにある.gitignoreファイルに、どのように書かれていたのが影響してましたか？その内容にもよるのかなと思いました。

[miyuho]

ご返答ありがとうございます。
「 /public/css 」と記述されている一文を削除いたしましたら、反映されるようになりました。

他に記述されていたのは
----------------------------------------
/node_modules
/public/hot
/public/js
/public/mix-manifest.json
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
-------------------------------------
です。

<追記>
どのディレクトリかを記述しておりませんでしたね。失礼いたしました。
プロジェクト直下の .gitignoreファイルになります。

[Lulucom]

/public/css は後から追加されましたか？その追加前にコミットされていたものは通常は無視されません。app.css などはそうなのではないでしょうか。

[miyuho]

追記した記憶は無いのですが、GitHubを確認しましたら、後から追加されたコードで間違いありません。
おっしゃる通り、app.cssファイルはその前からございました。
追加前にコミットしたファイルはそのままコミットされるのですね...！
勉強になりました。本当にありがとうございます！

[Lulucom]

よかったです^ ^
/public/cssを無視させていた経緯はよくわかりませんが、もしかしたらデプロイの過程でnpm run productionするつもりだったのかもしれませんね。

[miyuho]

...かもしれません......
今以上に知識の無かった前の自分が、他に何か変なコードを記述していないか、改めて確認してみようと思います。
ありがとうございました！

Answer 1

どこかの.gitignoreファイルとかに書かれてしまっていて、public/css/home.cssファイルがGitに無視されている、ということはありませんか？