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

はじめに

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】RSpecを使った自動テスト《システムスペック編》
# はじめに Railsでアプリケーションを開発する際、品質を担保するためにテストは欠かせません。その中でも、RSpecは多くの開発者に愛用されているテストフレームワークです。 今回は、RSpecを使ったRailsアプリケーションのテスト方 [...]
2024年7月11日 17:07
【Rails】RSpecを使った自動テスト《リクエストスペック編》
# はじめに Railsでアプリケーションを開発する際、品質を担保するためにテストは欠かせません。その中でも、RSpecは多くの開発者に愛用されているテストフレームワークです。 今回は、RSpecを使ったRailsアプリケーションのテスト方 [...]
2024年7月11日 16:06
【Rails】RSpecを使った自動テスト《コントローラースペック編》
# はじめに Railsでアプリケーションを開発する際、品質を担保するためにテストは欠かせません。その中でも、RSpecは多くの開発者に愛用されているテストフレームワークです。 今回は、RSpecを使ったRailsアプリケーションのテスト方 [...]
2024年7月11日 15:39
【Rails】RSpecを使った自動テスト《モデルスペック編》
# はじめに Railsでアプリケーションを開発する際、品質を担保するためにテストは欠かせません。その中でも、RSpecは多くの開発者に愛用されているテストフレームワークです。 今回は、RSpecを使ったRailsアプリケーションのテスト方 [...]
2024年7月11日 11:50
【Rails】RSpecを使った自動テスト《基本編》
# はじめに Railsでアプリケーションを開発する際、品質を担保するためにテストは欠かせません。その中でも、RSpecは多くの開発者に愛用されているテストフレームワークです。 今回は、RSpecを使ったRailsアプリケーションのテスト方 [...]
2024年7月10日 17:49
【Rails】デザインパターン「Concern」の基本情報と実装方法
# はじめに Ruby on RailsなどのMVCフレームワークで構築したWebシステムにはアンチパターンというものが存在します。システム開発におけるアンチパターンとは、避けるべき悪い設計や実装方法のことを指します。 MVCフレームワーク [...]
2024年7月10日 13:32
【Rails】デザインパターン「Form Object」の基本情報と実装方法
# はじめに Ruby on RailsなどのMVCフレームワークで構築したWebシステムにはアンチパターンというものが存在します。システム開発におけるアンチパターンとは、避けるべき悪い設計や実装方法のことを指します。 MVCフレームワーク [...]
2024年7月6日 22:50
【Rails】デザインパターン「Service Object」の基本情報と実装方法
# はじめに Ruby on RailsなどのMVCフレームワークで構築したWebシステムにはアンチパターンというものが存在します。システム開発におけるアンチパターンとは、避けるべき悪い設計や実装方法のことを指します。 MVCフレームワーク [...]
2024年7月6日 19:59