学習記録

アウトプット用に作りました

マニフェストファイル

マニフェストファイルとは

どのファイルを読み込むのかをまとめたファイルのことをいいます。

HTMLでは、そのページで必要となる読み込みファイルを、
application.html.erbファイル内のに記載します。

<head>
    <%= stylesheet_link_tag    'application', media: 'all' %>     # CSSファイル
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>    # JSファイル
</head>

このように記述して、application.scss、application.jsのファイルを読み込みます。
この二つのようなファイルのことをマニフェストファイルといいます。

application.scss、application.jsの中身をみてみると、

  • application.scss
*= require_self    # 自分自身を読み込む
 *= require_tree .    # 階層に存在している全てのファイルを読み込む
  • application.js
//= require_tree .

このような記載があります。
require_tree .を使うと、同ディレクトリのファイルを全て読み込んでしまうので、
ファイルを読み込む順番がわからなくなります。
それを防ぐために@importを使って必要なファイルのみ読み込んでファイル管理を安全に行うようにします。

application.scssからtop.scssを読み込むときは、

@import 'top';

を *= require_tree . よりも上に記述します。