困ったこと、やりたいこと
＼＼＼メインアプリの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は都度都度こういうのがあるな…一通り実装終えたらシリーズ化できそうです笑