QA@IT

railsはどこでcssを指定するのか?

15103 PV

現在rails3.2を使って勉強をしているのですが、CSSを使ってレイアウトを整える際にCSSを読み込む順番がscaffold.cssが一番後に読み込まれているため、コントローラ毎の個別cssであるのhoge.css等が上書きされてしまいます。
しかしcssの読み込みをどこで指定しているのかわからないので質問させていただきました。

application.html.erbには

<%= stylesheet_link_tag    "application", :media => "all" %>

と書かれていました。
そこで
assets/stylesheets/application.cssをみるとコメント以外には何も書かれていませんでした。

自分の考えですとこの書き方ではcssは何も読み込まれないと考えましたが、実際のブラウザ上のソースではscaffolds.cssが読み込まれています。

私はどのようにすればcssの読み込む順番を変更できますか?またどこでscaffolds.css等を指定しているのでしょうか?

回答

Rails 3.1からAsset pipelineという仕組みが導入されています。
これは読み込み時間を短縮する為に個別のCSS/JSファイルを結合し、単一のCSS/JSファイルとしてまとめて提供してくれる機能です。
(初期設定ではproductionモードのみ有効)
その関係で、application.cssファイルに記述されたコメント文に意味が発生しています。

app/assets/stylesheets/application.cssを見てみると、コメントアウトされていますが以下の行が確認できるかと思います。

 *= require_self
 *= require_tree .

このうち、require_tree .がapp/assets/stylesheets以下の全CSSファイルを読み込む部分になります。
この際、読み込む順番は辞書順になるため、hoge.cssよりもscaffold.cssは後に読まれることになります。

読み込む順番の指定方法 その1

app/assets/stylesheets/application.cssのコメント部分に個別のrequireを追加することで明示的に順番を指定することができます。

 *= require_self
 *= require scaffolds.css
 *= require hoges.css
 *= require_tree .

読み込む順番の指定方法 その2

0_scaffold.css、1_hoge.cssなどファイル名の先頭に数字などをつけることで読み込む順番を変えられます。

編集 履歴 (1)
  • 詳しい説明ありがとうございます。Asset pipelineはこのように指定するのですね。勉強になりました。 -
  • 参考になりました。ありがとうございます。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。