【Rails】Webpacker管理のCSSがHerokuで反映されない場合の対処

2020年7月30日 15:51

はじめに

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用に変更してほしいなあ...

関連記事

【Rails】ダウンロードしたフリーフォントをWebpackerを使って導入する方法
# はじめに Webサイトのデザインを彩るひとつの要素にフォントの種類があります。Google Fontsの登場により、様々なフォントが手軽に導入できるようになりました。しかし、世の中にはGoogle Fontsが提供するフォント以外にもたくさん [...]
2021年10月16日 13:26
【Rails】mimemagicに依存しているRailsアプリでbundle installコマンドが失敗する事象の対処法
# はじめに Railsアプリで`bundle install`コマンドを実行しようとしたところ、以下のエラーメッセージが出力されコマンドに失敗しました。 ``` Your bundle is locked to mimemagic (0 [...]
2021年10月14日 14:44
【Rails】macOSのアップデート後にrailsコマンドが失敗する事象の対処法
# はじめに 久しぶりにRailsアプリに手を入れようと思い、`rails server`コマンドを実行してRailsサーバーを立ち上げようとしたところ、エラーが出て起動に失敗してしまいました。 前回までの間にしたことの中で思い当たることと [...]
2021年10月14日 12:11
【Rails】Railsアプリのデバッグ《マルチデバイス篇》
# はじめに 近年のWebアプリはレスポンシブ対応が当たり前になっています。最低でもPCとスマートフォンに対応したデザイン、ときにはその中間のタブレットに対応したデザインなんかも作成する必要があります。 Webアプリの開発はPCを使って行う [...]
2021年5月23日 13:02
【Rails】Railsアプリのデバッグ《Better Errors篇》
# はじめに Railsアプリの開発中になんらかのエラーが発生すると、デフォルトでは以下のような画面が表示されます(画像をクリックすると拡大します)。 <a class="gallery" data-group="gallery" href [...]
2021年5月22日 19:42