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

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

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

Railsアプリで管理画面を作成するために、**[Administrate](https://github.com/thoughtbot/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: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`にスタイルシートの読み込み先を追記する**

```ruby:/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](https://thinline196.hatenablog.com/entry/2019/09/13/191316)


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

こちらもGitHubのIssues（[How to add custom CSS? #748](https://github.com/thoughtbot/administrate/issues/748)）に挙げられていました。

<img width="926" alt="スクリーンショット 2020-07-22 21.23.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602794/a5fd2e03-48aa-3b90-17fa-c69d8a59f54c.png">

```terminal: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は都度都度こういうのがあるな…一通り実装終えたらシリーズ化できそうです笑