[Rails] How to apply the CSS used in the main app with Administrate

Trouble, what you want to do

** \\ Main application CSS cannot be used /// **

This is when I used the gem ** Administrate to create an administration screen in the Rails app **. I tried to apply the CSS applied to the view of the main app to the views under admin, but I can't ...

I'm using the same class name as the main app ... what should I do? ?? ??

environment

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

Conclusion

** Add the destination to load the Administrate stylesheet **

** 1. Generate _styoesheet.html.erb with rails g administrate: views: layout **

terminal

#Run in the corresponding app directory
$ 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 #this child! !! !!
      create  app/views/admin/application/_javascript.html.erb
      create  app/views/admin/application/_flashes.html.erb
      create  app/views/admin/application/_icons.html.erb

• Since the generated file is erb, if the environment is haml, please convert it with $ rails haml: erb2haml etc.

** 2. Add the stylesheet loading destination to _stylesheet.html.haml **

ruby:/views/admin/application/_stylesheet.html.haml

- Administrate::Engine.stylesheets.each do |css_path|
  = stylesheet_link_tag css_path
  #Add this line ↓
  = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= yield :stylesheet

With this description, the file /assets/stylesheets/application.scss will be read, and as a result, the existing stylesheet can be applied to the admin screen as well.

Reference article

[Rails5] Change Administrate stylesheet read destination --196Log

Digression: Customize existing layout

I don't think there is much demand, but ** it is possible to change (customize) the layout of the default administrate screen **.

This was also listed on GitHub Issues (How to add custom CSS? # 748).

terminal

#Run in the corresponding app directory
$ 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

In this way, the style sheet is generated in a hurry, so you can apply the changes by tweaking the part you want to customize.

Even so, Administrate has this kind of thing every time ... It seems that it can be made into a series once the implementation is completed lol