[Rails]Administrateでメインアプリで使っていたCSSを適用させる方法

5928 ワード
administrate Ruby Rails Rails5 Ruby テキストリンク

困ったこと、やりたいこと

＼＼＼メインアプリのCSSが使えない／／／

Railsアプリで管理画面を作成するために、Administrateというgemを使用した時のことです。
メインアプリのビューに適用させているCSSを、admin以下のビューにも適用させようとしたのにできない…

メインアプリと同じクラス名使ってるのに…どうすればいいの？？？

環境

  • Ruby 2.5.1
  • Rails 5.0.7.2
  • Administrate 0.14.0
  • haml 5.1.2

結論

Administrateのスタイルシートの読み込み先を追加する

1. rails g administrate:views:layoutで_styoesheet.html.erbを生成

terminal
# 該当のアプリディレクトリで実行
$ rails g administrate:views:layout
  Running via Spring preloader in process 44282
      create  app/views/layouts/admin/application.html.erb
      create  app/views/admin/application/_navigation.html.erb
      create  app/views/admin/application/_stylesheet.html.erb #この子！！！
      create  app/views/admin/application/_javascript.html.erb
      create  app/views/admin/application/_flashes.html.erb
      create  app/views/admin/application/_icons.html.erb

※生成されるファイルはerbなので、環境がhamlの場合は$ rails haml:erb2hamlなどで変換してください。

2. _stylesheet.html.hamlにスタイルシートの読み込み先を追記する

/views/admin/application/_stylesheet.html.haml
- Administrate::Engine.stylesheets.each do |css_path|
  = stylesheet_link_tag css_path
  # この行↓を追記
  = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= yield :stylesheet

この記述によって、/assets/stylesheets/application.scssのファイルを読み込みにいってくれるので、結果的にadministrateの画面でも既存のスタイルシートを適用することができます。

参考記事

【Rails5】Administrateのスタイルシート読込先を変更する - 196Log

余談:既存レイアウトのカスタマイズ

あまり需要もないかとは思いますが、既定のadministrate画面のレイアウトを変更（カスタマイズ）することも可能です。

こちらもGitHubのIssues（How to add custom CSS? #748）に挙げられていました。

terminal
# 該当のアプリディレクトリで実行
$ rails g administrate:assets:stylesheets
  Running via Spring preloader in process 44122
      create  app/assets/stylesheets/administrate
      create  app/assets/stylesheets/administrate/application.scss
      create  app/assets/stylesheets/administrate/base/_forms.scss
      create  app/assets/stylesheets/administrate/base/_layout.scss
      create  app/assets/stylesheets/administrate/base/_lists.scss
      create  app/assets/stylesheets/administrate/base/_tables.scss
      create  app/assets/stylesheets/administrate/base/_typography.scss
      create  app/assets/stylesheets/administrate/components/_app-container.scss
      create  app/assets/stylesheets/administrate/components/_attributes.scss
      create  app/assets/stylesheets/administrate/components/_buttons.scss
      create  app/assets/stylesheets/administrate/components/_cells.scss
      create  app/assets/stylesheets/administrate/components/_field-unit.scss
      create  app/assets/stylesheets/administrate/components/_flashes.scss
      create  app/assets/stylesheets/administrate/components/_form-actions.scss
      create  app/assets/stylesheets/administrate/components/_main-content.scss
      create  app/assets/stylesheets/administrate/components/_navigation.scss
      create  app/assets/stylesheets/administrate/components/_pagination.scss
      create  app/assets/stylesheets/administrate/components/_search.scss
      create  app/assets/stylesheets/administrate/library/_clearfix.scss
      create  app/assets/stylesheets/administrate/library/_data-label.scss
      create  app/assets/stylesheets/administrate/library/_variables.scss
      create  app/assets/stylesheets/administrate/reset/_normalize.scss
      create  app/assets/stylesheets/administrate/utilities/_text-color.scss

このように、スタイルシートがブワーッと生成されるので、あとは自分がカスタマイズしたい部分をいじれば変更が適用されます。

それにしてもAdministrateは都度都度こういうのがあるな…一通り実装終えたらシリーズ化できそうです笑