[Ruby] [Rails] How to apply CSS used in main application with Administrate

1 minute read

Difficulty, what you want to do

\\CSS of main application cannot be used ///

This is when I used a gem called Administrate to create an admin screen in a Rails app**. I tried to apply the CSS applied to the view of the main application to the views under admin as well…

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 import destination of the style sheet of Administrate

**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

*The generated file is erb, so if the environment is haml, convert it with $ rails haml:erb2haml.

**2. Add the stylesheet read 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

By this description, the file of /assets/stylesheets/application.scss is read, so that the existing stylesheet can be applied to the administrate screen as a result.

Reference article

[Rails 5] Change the stylesheet read destination of Administrate-196Log

Side note: Customizing existing layouts

I think that there is not much demand, but It is possible to change (customize) the layout of the default administrate screen.

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

Screenshot 2020-07-22 21.23.11.png

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 will be generated so that you can modify the part you want to customize and the changes will be applied.

Anyway, Administrate has this kind of thing every time… It seems like it can be made into a series once it has been implemented lol