RailsでCSSの読み込む順番を制御する方法

application.cssで読み込み順序を制御可能です。

app/assets/stylesheets/application.css

/*
 *= require_self
 *= require_tree .
 */

Asset Pipelineの仕組みによりここで読み込みの順番を制御しています。
この仕組はディレクティブと呼ばれます。

require_self

これは、このapplication.css自体を最終的なスタイルシートに含めることを指定しています。
この行がないと、このファイルに書かれたcssは無視されます。

require_tree .

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

読み込む順番の指定方法

順番を変更したいCSSを以下のように個別のrequireを追加することで明示的に順番を指定することができます。

app/assets/stylesheets/application.css

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