【簡単】RailsでCSS(スタイルシート)を読み込む方法とCSSが反映されないときの解決策
Ruby on Rails で CSSを読み込む方法を解説します。production 環境では、CSSファイルを配置するだけでは反映がされません。その問題と解決策です。
おすすめ記事
ヤフーニュースと窓の杜で無料VTuberアプリ『メイアライブ』が紹介されました。
CSSファイルを配置する
スタイルシートの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環境でも反映されるようになります。サーバサイドで上記を行なってもブラウザから反映を確認できない場合は、ブラウザキャッシュもクリアしてみて下さい。
コメント