🌋

CSSが反映されない問題を解決する

に公開

はじめに

Rubyで開発をしているときに、スタイルを変更しても反映されない問題が発生しました。
既存のスタイルを変更すると動作するのですが、新規でクラスを作成しスタイルを書くと全く反映されません。

今回はその解決方法を、備忘録的な感じで説明していきたいと思います。

スタイルが反映されない

例として、以下のようなコードを書きました。

sample.html.erb
<div>
 <p class="existing-class">元から存在していたコード<p/>
 <p class="sample-class-a">新規で作成したコード<p/>
<div/>
_sample.scss
.existing-class { // <- 元から存在していたスタイル
 font-size: 20px;
}

.sample-class-a { // <- 新規で作成したスタイル
 font-size: 20px;
}
application.scss
@import "sample";

しかし、sample-class-aのスタイルが反映されませんでした。
existing-classのスタイルは反映されているのになぜだろう...🤔

Assetのcompile

調べてみたところ、どうやらAssetがcompileされていないことが原因で、この問題を引き起こしていたようです。


Assetとは

プログラムを動かすための部品のこと。 アセットには、スマートキャンペーン、メール、リスト、ランディングページ、フォームなどがある。

Assetについてはこちらの記事を参考にしました。

https://gliese.co.jp/success/marketo/asset.html

compileとは

プログラミング言語で記述されたプログラムのソースコードをコンピューターで実行可能な形式に変換すること。

compileについてはこちらの記事を参考にしました。

https://eow.alc.co.jp/search?q=compile

Assetがcompileされていないとどのような問題が起こるのか

CSSやJavaScriptが読み込まれない

ページのスタイルが適用されずにデザインが崩れる、JavaScriptが機能しないという問題が起こる。

アセットパイプラインによる最適化が適用されない

アセットパイプライン(SprocketsやWebpacker)が提供する機能(圧縮、バンドルなど)が利用できないされない。
ページの読み込みが遅くなることやパフォーマンスの悪化という可能性がある。

キャッシュが古い状態のまま利用される

本来アセットパイプラインにより、ファイル名にハッシュが付与され、ブラウザのキャッシュを適切に制御している。
compileされていない場合、ハッシュが付与されないため、キャッシュが古い状態のままになる。

新しいスタイルやJavaScriptが正しく反映されず、古いバージョンのまま表示される可能性がある。

-> 既存のスタイルは反映されて、新規のスタイルが反映されなかったのはこれが原因。


つまり、Assetをcompileすればこの問題が解決できそう!
いざやってみる💪

解決編

以下のコードをターミナルに入力する。

dockerを使用している場合
$ docker compose exec web bundle exec rails assets:clobber
$ docker compose exec web bundle exec rails assets:precompile
dockerを使用していない場合
$ rails assets:clobber
$ rails assets:precompile

すると、新規で作成したスタイルが反映されるようになりました!

応用編

Assetのcompileすることで、キャッシュが最新のものになったためスタイルが反映されるようになりました。
しかし、依然として新規で作成したスタイルが、反映されないケースが存在します。
スタイルを作成するごとにcompileすれば反映されるようになりますが、そんなの面倒すぎる。

画面をリロードしただけで、新規で作成したスタイルが反映されるようにしたい!

そんなときは config/environments/development.rb を確認してみてください。

config/environments/development.rb
config.assets.debug = true
config.assets.compile = true
config.assets.digest = false

上記のコードがconfig/environments/development.rbに存在しない場合は追加してみてください。

追加後にもう一度compileのコマンドを実行する。

dockerを使用している場合
$ docker compose exec web bundle exec rails assets:clobber
$ docker compose exec web bundle exec rails assets:precompile
dockerを使用していない場合
$ rails assets:clobber
$ rails assets:precompile

すると、画面をリロードするだけで、新規のスタイルが読み込まれるようになりました!!

開発者向けの設定ではありますが、リロードだけで新規のスタイルを反映させたい場合は推奨します。

各コードの説明

config/environments/development.rb
config.assets.debug = true
 ## アセットを個別に読み込む設定。開発中のデバッグ用。
config.assets.compile = true
 ## リクエストごとにアセットをコンパイルする設定。開発向けで、本番では非推奨。
config.assets.digest = false
 ## アセット名にハッシュ(ダイジェスト)を付けない設定。キャッシュ管理が難しくなるので本番では非推奨。

本番向けの設定は以下が一般的なようです。

config/environments/development.rb
config.assets.debug = false
config.assets.compile = false
config.assets.digest = true

まとめ

「既存のスタイルは反映されるのに、新規で作成したスタイルは反映されない」

そんなときはAssetのcompileがされていない可能性があります。

Assetのcompileがされていないと、

  • CSSやJavaScriptが読み込まれない
  • アセットパイプラインによる最適化が適用されない
  • キャッシュが古い状態のまま利用される

といったような問題を引き起こす可能性があります。

compileを実行することで、キャッシュを最新のものに変更することができるため、新規で作成したスタイルを読み込んでくれるようになります。

画面のリロードだけではスタイルが更新されない場合は、config/environments/development.rbの設定を見直し、開発環境向けの設定に変更することで、問題が解決します。


何か不明点や質問等ありましたら、お気軽にコメントしていただけますと幸いです!

Discussion