【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】Webサーバー「Unicorn」の基本情報と実装方法
# はじめに Railsアプリを本番環境で稼働させるには、クライアントからのリクエストを捌くWebサーバーを導入する必要があります。WebサーバーはクライアントからのリクエストをRailsアプリに伝達し、Railsアプリで処理されたレスポンスをク [...]
2021年4月15日 12:17
【Rails】デプロイツール「Capistrano」の基本情報と実装方法
# はじめに アプリを本番環境にアップロードして誰でもアクセスできる状態にすることをデプロイと言います。デプロイで行うべきことは多岐にわたります。Railsアプリの場合で言えば、本番環境にアップロードすることはもちろんですが、Gemのインストール [...]
2021年4月14日 9:56
【Rails】Webpackerの基本情報と実装方法
# はじめに Rails 6からWebpackerが正式採用されました。Rails 5ではオプションで追加することができたWebpackerですが、Rails 6からは普通にアプリを作成するだけでWebpackerがインストールされ、必要な設定も [...]
2021年4月12日 14:36
【Rails】アセットパイプライン(Sprockets)の基本情報と実装方法
# はじめに Ruby on Railsにはアセットパイプラインという機能があります。アセットパイプラインは画像、CSS、JavaScriptといったアセットファイルを連結/圧縮することでRailsアプリを高速化します。また、より高級な言語で書か [...]
2021年4月11日 14:08
【Rails】Turbolinksの基本情報と実装方法
# はじめに Ruby on Railsにはページの遷移を高速化するTurbolinksという機能があります。Turbolinksは優れたJavaScriptライブラリですが、Rails 5からは標準で有効化されているため、Turbolinksを [...]
2021年4月10日 17:59