assets:precompileする対象のファイル名・パスを変更する方法

assets/配下のファイルを圧縮して１つのファイルにするとき、だいたいは assets/stylesheets/application.css とかにマニフェストファイル置きますよね。デフォルトでそうなっているはずです。

ただ、管理画面とフロント側で呼び出すスタイルを分けたいなんてことあると思います。自分がそうでした。イメージとしては以下のような感じです。

assets/

📂stylesheets
  📂admin_style
    📄admin.scss
  📂front_style
    📄front.scss

これを実現するには、いくつかassets:precompile周りの設定をいじらなくてはいけません。今回はその方法を紹介します。

config/initializers/assets.rbに任意のファイル名を追記する

まずは、コンパイルしたいファイルパスをassets:precompile対象に追記します。このとき、追記するパスは、 app/assets/stylesheets/ からの相対パスです。

config/initializers/assets.rb

Rails.application.config.assets.precompile += %w(
  front_style/front.css # くれぐれも先頭に / をつけないでください。
  admin_style/admin.css # くれぐれも先頭に / をつけないでください。
  …
)

もし、パス名が合っているか不安な場合は、以下を実行して確認してみてください。

pry(main)> Rails.application.assets.resolve("追加したいパス名")
# "/directory/app/assets/stylesheets/追加したいパス名"

なお、このとき指定するファイルの拡張子が.scssであっても、.cssと書いてください。これはコンパイル後に期待する拡張子（.css）を書くべきだからです。

※ 4.1 アセットをプリコンパイルする 参照

プリコンパイル配列にSassやCoffeeScriptファイルなどを追加する場合にも、必ず.jsや.cssで終わるファイル名 (つまりコンパイル後のファイル名として期待されているファイル名) も指定してください。

assets:precompileを実行する

config/environments/development.rbで、 config.assets.debug = true にしている場合は不要かもしれませんが、念のため、手元で実行してみてもいいと思います。

config/environments/development.rb

Rails.application.configure do
  config.assets.debug = false
end

実行した結果、 public/assets/ 以下にちゃんと配置されていればOKです。されていない場合はなにかパスとか間違っているかもしれません。

なお、プリコンしたファイルをview側で呼び出すときも、少し変更が必要です。 プロジェクトによりますが、 application.html.erb(slim) のheadタグ内でスタイルを呼び出しているところをいじります。

application.html.slim

= stylesheet_link_tag "application"
↓
= stylesheet_link_tag "front_style/front"

管理画面側も同じ変更をすればOKかと思います。