ichigoryume programming blog

プログラミングに関する備忘録。主にHTML5, C#, Swiftなど。

Railsでのスタイルシート読み込み制御

デフォルトでは

  • app/assets/stylesheetsの下を全て読み込む
  • application.cssを最後に読み込む

ように設定されている。

これは、application.cssに以下のように記述されているため

 *= require_tree .
 *= require_self

require_selfはapplication.css自身、require_tree . はstylesheetsディレクトリ以下の全スタイルシートを読み込む、という意味。

全てのViewについて一括して読み込み制御を行うには

application.cssの記述を調整する。

 *= require_self
 *= require hoge.css
 *= require_tree .

View毎に読み込みを制御する

viewのerbに

<%= stylesheet_link_tag "sytlesheet-name", :media => "all" %>

のように書く。
HAMLの場合は

= stylesheet_link_tag "stylesheet-name", :media => "all"

application.css で require_tree. を外した場合

scssのプリコンパイルが行われなくなるので、config/initializers/assets.rbを編集し、プリコンパイル対象を指定する。

Rails.application.config.assets.precompile += %w( hoge )

ワイルドカードを使った指定も可

Rails.application.config.assets.precompile += %w( * )