【簡単】RailsでCSS(スタイルシート)を読み込む方法とCSSが反映されないときの解決策

Ruby on Rails で CSSを読み込む方法を解説します。production 環境では、CSSファイルを配置するだけでは反映がされません。その問題と解決策です。

おすすめ記事


【ヤフーニュースや窓の杜で紹介された】無料VTuberアプリ『メイアライブ 雛乃木まやエディション』のダウンロード

 

 

スタイルシートのCSSファイル(例: custom.css)を、app/assets/stylesheets 配下に置きます。

ビューファイルに下記のように書きます。

  • スタイルシートがcustom.cssというファイル名の場合、custom とだけ指定する。ファイル名の拡張子.css は不要です。
スタイルシートを読み込むコード
<%= stylesheet_link_tag "custom", :media => "all" %>

 

production環境では、CSSの更新を反映させるためにプリコンパイルをする必要があります。これを忘れると、「CSSファイルを更新したのに新しいCSSが反映されないという問題」が起こります。

ターミナルで下記のコマンドを実行します。

rake assets:precompile

もしくは、

rake assets:precompile:all

これで、CSSがproduction環境でも反映されるようになります。サーバサイドで上記を行なってもブラウザから反映を確認できない場合は、ブラウザキャッシュもクリアしてみて下さい。

コメントを入力:
Y W S E᠎ R