곤란한 일, 하고 싶은 것

＼＼＼ 메인 앱의 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는 매번 이런 것이 있구나…