はじめに

Rails6から標準導入されたWebpacker（Webpack for Rails）でCSSを管理しているRailsアプリのCSSが、ローカル開発環境では反映されていたのに、デプロイ先のHerokuでは反映されないという事象がありました。

対処

app/views/layouts/application.html.erbを以下のように修正します。

# 修正前
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

　　　↓

# 修正後
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

ローカル開発環境では反映されていた理由

すみません、調べたんですがわかりませんでした。

一説によると、ローカル開発環境にはwebpack-dev-serverがあるかららしいんですが、詳しいことはわかりませんでした。

以下の質問に対する答えにwebpack-dev-serverに関する言及がされています。

まとめ

今回は小ネタという感じでしたが、あまりにも初歩的なミスだったので自戒の意味を込めて記事にしました。

それにしても、Railsアプリ作成時にWebpackerをインストールするんならapplication.html.erbのCSS読み込みタグもWebpacker用に変更してほしいなあ...