Railsで`stylesheet_link_tag`が効かない問題の解決方法

Railsアプリケーションを開発しているときに、<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> を利用してCSSを読み込もうとしたにも関わらず、以下のエラーが発生することがあります：

Propshaft::MissingAssetError at /documents/1
The asset 'application.css' was not found in the load path.

この問題とその解決方法について、以下に解説します。

問題の原因

このエラーは、Railsがアセットファイル（ここではapplication.css）を適切にロードできていない場合に発生します。
主な原因として以下が考えられます：

1. sassc-rails がインストールされていない。
2. app/assets/config/manifest.js が存在しない。
3. manifest.js に必要な記述が不足している。

解決方法

1. sassc-rails をインストールする

Railsで .scss ファイルを使用する場合、sassc-rails が必要です。このGemがインストールされていないと、.scss ファイルを処理できずエラーになります。

手順：

1. Gemfile に以下を追加します：

   gem "sassc-rails"
   

2. 以下のコマンドを実行してGemをインストールします：

   bundle install
   

3. サーバーを再起動します：

   bin/rails server
   

2. manifest.js を作成する

Rails 7以降、デフォルトのアセット管理ツールである Propshaft を利用する場合、manifest.js ファイルが必要です。

手順：

1. 以下のコマンドでディレクトリとファイルを作成します：

   mkdir -p app/assets/config
   touch app/assets/config/manifest.js
   

2. manifest.js に以下を記述します：

   //= link application.css
   //= link controllers/application.js
   //= link controllers/file_input_controller.js
   //= link controllers/hello_controller.js
   //= link controllers/index.js
   

3. アセットを再コンパイルする

設定を変更した後、アセットを再コンパイルする必要があります。

手順：

以下のコマンドを実行してください：

bin/rails assets:clobber
bin/rails assets:precompile

これにより、application.css が正しくビルドされます。

---

4. Railsのレイアウトファイルを確認する

application.html.erb に以下のコードが正しいことを確認してください：

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>

もし変更している場合は、必ず application と記載されていることを確認してください。

実際に試した解決手順

筆者のケースでは、以下の手順で問題を解決しました：

1. Gemfile に sassc-rails を追加し、bundle install を実行。
2. app/assets/config/manifest.js を作成し、以下を記載：

   //= link application.css
   //= link controllers/application.js
   //= link controllers/file_input_controller.js
   //= link controllers/hello_controller.js
   //= link controllers/index.js
   

3. アセットを再コンパイル：

   bin/rails assets:clobber
   bin/rails assets:precompile
   

4. ブラウザのキャッシュをクリア（Shift + F5）。

これだけで問題は解決しました！

まとめ

このエラーは、Rails 7以降で採用された Propshaft の設定やアセットの配置ミスが主な原因となることが多いです。以下を確認することで、多くの場合解決できます：

1. sassc-rails がインストールされている。
2. app/assets/config/manifest.js が存在し、必要な記述が含まれている。
3. アセットを正しくプリコンパイルした。