【Rails】ページ内で読み込みたいCSSを制御する

ソースコードを見ると/app/assets/stylesheets/以下にあるファイルを読み込む記述が自動で書き出されている。
その記述に関してあれこれ変更したかったのでやってみました。

一応環境情報を載せておきます。
ruby:2.6.4
rails:5.2.3

##目的
１.ページ内に自動記述されるCSSの読み込み順番を変更したい。
２.SASS使用のためのimportさせるファイルは読み込ませたくない。

##方法
自動記述の制御はある程度/app/assets/stylesheets/application.scss内で調整ができる。

application.scss（初期状態）

 /*
  * This is a manifest file that'll be compiled into application.css, which will include all the files |
  * listed below.
  *
  * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's |
  * vendor/assets/stylesheets directory can be referenced here using a relative path. |
  *
  * You're free to add application-wide styles to this file and they'll appear at the bottom of the |
  * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS |
  * files in this directory. Styles in this file should be added after the last require_* statement. |
  * It is generally better to create a new file per style scope. |
  *
  *= require_tree .
  *= require_self
  */

###１.ページ内に自動記述されるCSSの読み込み順番を変更したい。
下部にある*= require_tree .から*= require_selfまでを変更する。
アセットパイプラインの仕組みにより、ここで読み込みに関して調整可能。
この仕組みはディレクティブと呼ばれている。
（※デフォルトだとアルファベット順？）

今回は最下部に記述されるapplication.cssを最上部にしたいので以下のように記述しました。

application.scss（変更後）

 *= require_self
 *= require_tree .

変更点は、単純に記述の順番を入れ替えただけ。

*= require_tree .はインクルードさせる記述。
（.とあるので/app/assets/stylesheets/を指定していることになる？）

*= require_selfは正直よくわからなかった・・・。勉強します。

例えばhoge01.css、hoge02.css...の順で絶対並べたい！という場合は、

application.scss

 *= require_self
 *= require hoge01.css
 *= require hoge02.css
 *= require_tree .

のように書いてあげればOK。

ただし、今の状態だと/app/assets/stylesheets/以下全てのファイルが自動記述されてしまうので、次で調整する。

###２.SASS使用のためのimportさせるファイルは読み込ませたくない。
自分はSASSで使用する変数ファイルなどを/app/assets/stylesheets/partial/以下に格納しました。
ひとまずサブディレクトリは読み込まれないようにします。

application.scss（変更後）

 *= require_self
 *= require_directory .

*= require_tree .　→　*= require_directory .
に変更するだけ。

*= require_directory .は/app/assets/stylesheets/pretial/直下にあるファイルだけ読み込むよ、というもの。

自動でやってくれるのはとても便利ですので、なおさら制御方法は知っておかなきゃいけないなと痛感。
まだまだRails開発を始めたばかりなので、今後深掘りしていこうと思います。

##参考サイト
RailsでCSSの読み込む順番を制御する方法 - Qiita
Rails 使用するCSSを指定する | | KeruuWeb
Railsのマニフェストファイルを使ったJsとStylesheetの呼び出し - Qiita