【rails】CSSの読み込みについて

railsでビューにCSSを読み込む方法について

ビューへのcssの読み込みについては、デフォルトで次のように記載されています。

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

つまり共通ビューであるapplication.html.erbでapplication.cssファイルを読み込んでいます。

そしてapplication.cssにはデフォルトで次のような記載があります。

*= require_tree .
*= require_self

前者は同ディレクトリのcssをまとめて読み込みます。

ちなみに「.」は引数でカレントディレクトリ、つまりstylesheets以下のcssをまとめて読み込むようになります。

後者はapplicatiton.css自体を読み込みます。

しかし前者の場合では、ファイルを読み込む順番がファイル名のアルファベット順（辞書順）になってしまいます。

例えば、変数など定義して複数のCSSで使っていた場合、読み込む順番によって弊害が生じます。

他にも、読み込む順番を自分で指定したい場合もあります。

そこで「＠import」を使用して、明示的にCSSを読み込むことで解決できます。

例えば、test.cssというファイルをsample.cssの前に読み込みたい場合は、

@import 'test';
@import 'sample';
#　拡張子は不要です

また、application.scssのように、どのファイルを読み込むのかまとめているファイルのことをマニフェストファイルと呼びます。