0. はじめに
Rubyで開発をしているときに、スタイルを変更しても反映されない問題が発生しました。
既存のスタイルを変更すると動作するのですが、新規でクラスを作成しスタイルを書くと全く反映されません。
今回はその解決方法を、備忘録的な感じで説明していきたいと思います。
1. スタイルが反映されない
例として、以下のようなコードを書きました。
<div>
<p class="existing-class">元から存在していたコード<p/>
<p class="sample-class-a">新規で作成したコード<p/>
<div/>
.existing-class { // <- 元から存在していたスタイル
font-size: 20px;
}
.sample-class-a { // <- 新規で作成したスタイル
font-size: 20px;
}
@import "sample";
しかし、sample-class-aのスタイルが反映されませんでした。
existing-classのスタイルは反映されているのになぜだろう...🤔
2. Assetのcompile
調べてみたところ、どうやらAssetがcompileされていないことが原因で、この問題を引き起こしていたようです。
2-1. Assetとは
プログラムを動かすための部品のこと。 アセットには、スマートキャンペーン、メール、リスト、ランディングページ、フォームなどがある。
Assetについてはこちらの記事を参考にしました。
2-2. compileとは
プログラミング言語で記述されたプログラムのソースコードをコンピューターで実行可能な形式に変換すること。
compileについてはこちらの記事を参考にしました。
2-3. Assetがcompileされていないとどのような問題が起こるのか
2-3-1. CSSやJavaScriptが読み込まれない
ページのスタイルが適用されずにデザインが崩れる、JavaScriptが機能しないという問題が起こる。
2-3-2. アセットパイプラインによる最適化が適用されない
アセットパイプライン(SprocketsやWebpacker)が提供する機能(圧縮、バンドルなど)が利用できないされない。
ページの読み込みが遅くなることやパフォーマンスの悪化という可能性がある。
2-3-3. キャッシュが古い状態のまま利用される
本来アセットパイプラインにより、ファイル名にハッシュが付与され、ブラウザのキャッシュを適切に制御している。
compileされていない場合、ハッシュが付与されないため、キャッシュが古い状態のままになる。
新しいスタイルやJavaScriptが正しく反映されず、古いバージョンのまま表示される可能性がある。
-> 既存のスタイルは反映されて、新規のスタイルが反映されなかったのはこれが原因。
つまり、Assetをcompileすればこの問題が解決できそう！
いざやってみる💪
3. 解決編
以下のコードをターミナルに入力する。
$ docker compose exec web bundle exec rails assets:clobber
$ docker compose exec web bundle exec rails assets:precompile
$ rails assets:clobber
$ rails assets:precompile
すると、新規で作成したスタイルが反映されるようになりました！
4. 応用編
Assetのcompileすることで、キャッシュが最新のものになったためスタイルが反映されるようになりました。
しかし、依然として新規で作成したスタイルが、反映されないケースが存在します。
スタイルを作成するごとにcompileすれば反映されるようになりますが、そんなの面倒すぎる。
画面をリロードしただけで、新規で作成したスタイルが反映されるようにしたい！
そんなときは config/environments/development.rb を確認してみてください。
config.assets.debug = true
config.assets.compile = true
config.assets.digest = false
上記のコードがconfig/environments/development.rbに存在しない場合は追加してみてください。
追加後にもう一度compileのコマンドを実行する。
$ docker compose exec web bundle exec rails assets:clobber
$ docker compose exec web bundle exec rails assets:precompile
$ rails assets:clobber
$ rails assets:precompile
すると、画面をリロードするだけで、新規のスタイルが読み込まれるようになりました！！
開発者向けの設定ではありますが、リロードだけで新規のスタイルを反映させたい場合は推奨します。
各コードの説明
config.assets.debug = true
## アセットを個別に読み込む設定。開発中のデバッグ用。
config.assets.compile = true
## リクエストごとにアセットをコンパイルする設定。開発向けで、本番では非推奨。
config.assets.digest = false
## アセット名にハッシュ（ダイジェスト）を付けない設定。キャッシュ管理が難しくなるので本番では非推奨。
本番向けの設定は以下が一般的なようです。
config.assets.debug = false
config.assets.compile = false
config.assets.digest = true
5. まとめ
「既存のスタイルは反映されるのに、新規で作成したスタイルは反映されない」
そんなときはAssetのcompileがされていない可能性があります。
Assetのcompileがされていないと、
- CSSやJavaScriptが読み込まれない
- アセットパイプラインによる最適化が適用されない
- キャッシュが古い状態のまま利用される
といったような問題を引き起こす可能性があります。
compileを実行することで、キャッシュを最新のものに変更することができるため、新規で作成したスタイルを読み込んでくれるようになります。
画面のリロードだけではスタイルが更新されない場合は、config/environments/development.rbの設定を見直し、開発環境向けの設定に変更することで、問題が解決します。
何か不明点や質問等ありましたら、お気軽にコメントしていただけますと幸いです！