Rails 使用するCSSを指定する

RailsではCSSを特に指定しなくても読み込まれるスタイルシートと、自分で指定して読み込むスタイルシートがあります。

自動で読み込まれるスタイルシート

この自動で読み込まれるスタイルシートはapp/assets/stylesheets/application.cssで指定します。

ディレクトリ以下の全てのスタイルシートを読み込む

*= require_tree .と記述するとapp/assets/stylesheets以下の全ての階層のスタイルシートが読み込まれます。

ディレクトリ直下の直下のスタイルシートを読み込む

*= require_directory .と記述するとapp/assets/stylesheets直下の全てのスタイルシートが読み込まれます。サブディレクトリは読み込まれません。

指定したスタイルシートを読み込む

自動で読み込まれるスタイルシートに加えて、自分でスタイルシートを指定して読み込むには、stylesheet_link_tagを使います。

Step1. スタイルシートを配置する

スタイルシートは、app/assets/stylesheets直下に何かディレクトリを作成し、そこに入れます。ここではbookというディレクトリに入れます。

Step2. Viewでスタイルシートを読み込む。

ビューファイルを開き、次のようにしてスタイルシートを読み込みます。ここでは、book/chapter2.css.scssを読み込みます。

<%= stylesheet_link_tag "book/chapter2", :media => "all" %>

Step3. (SCSSなら)プリコンパイルに追加する。

*= require_tree .を外している場合は、SCSSファイルがプリコンパイルされないため、Sprockets::Rails::Helper::AssetNotPrecompiledとエラーが発生します。

これを解決するには、config/initializers/assets.rbを開き、次のようにbook/chapter2.css.scssをプリコンパイル対象に指定します。

Rails.application.config.assets.precompile += %w( book/chapter2 )

もしくは、ディレクトリごとプリコンパイル対象にしたい場合は、ワイルドカード(*)で指定します。

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

Rails用のアプリケーションサーバー(pumaなど)を再起動して完了です。