[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

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

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

スクリーンショット 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 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

Recommended Posts

[Rails] How to apply the CSS used in the main app with Administrate
[Rails] How to operate the helper method used in the main application with Administrate
How to change app name in rails
How to decorate the radio button of rails6 form_with (helper) with CSS
[Rails] How to get the user information currently logged in with devise
How to check Rails commands in the terminal
[Rails] How to register multiple records in the intermediate table with many-to-many association
How to set the display time to Japan time in Rails
How to push an app developed with Rails to Github
[How to insert a video in haml with Rails]
How to query Array in jsonb with Rails + postgres
[Rails 6] How to set a background image in Rails [CSS]
[Rails] How to display an image in the view
[With back tricks] How to introduce React to the simplest Rails
How to deploy jQuery in your Rails app using Webpacker
Apply CSS to a specific View in Ruby on Rails
[Rails] How to display information stored in the database in view
Place in the middle with css
How to introduce jQuery in Rails 6
How to install Swiper in Rails
[Rails / Routing] How to refer to the controller in the directory you created
[Rails] How to introduce kaminari with Slim and change the design
How to install the language used in Ubuntu and how to build the environment
How to get boolean value with jQuery in rails simple form
How to insert a video in Rails
[Rails] How to use the map method
How to use MySQL in Rails tutorial
[rails] How to configure routing in resources
How to get the date in java
How to implement ranking functionality in Rails
How to build Rails 6 environment with Docker
How to apply thymeleaf changes to the browser immediately with #Spring Boot + maven
How to interact with a server that does not crash the app
Change the save destination of the image to S3 in the Rails app. Part 2
[Ruby on Rails] How to log in with only your name and password using the gem devise
[Rails] How to decide the destination by "rails routes"
How to check the logs in the Docker container
Downgrade an existing app created with rails 5.2.4 to 5.1.6
I tried to organize the session in Rails
[Rails] How to use select boxes in Ransack
How to get the ID of a user authenticated with Firebase in Swift
[Rails6] How to connect the posting function generated by Scaffold with the user function generated by devise
Publish the app made with ruby on rails
How to resolve errors that occur in the "Ruby on Rails" integration test
How to translate Rails into Japanese in general
How to output jar with main class specified by gradle in Intellij IDEA
The code I used to connect Rails 3 to PostgreSQL 10
How to separate .scss by controller in Rails
How to conditionally add html.erb class in Rails
How to store data simultaneously in a model associated with a nested form (Rails 6.0.0)
How to implement a like feature in Rails
How to easily create a pull-down in Rails
How to use JQuery in js.erb of Rails6
How to build API with GraphQL and Rails
[Rails] How to build an environment with Docker
How to build the simplest blockchain in Ruby
[Rails] How to use PostgreSQL in Vagrant environment
Try to summarize the common layout with rails
[Rails] I want to load CSS with webpacker
How to deal with the error yaml.scanner.ScannerError: while scanning for the next token that appeared in Rails environment construction with Docker
How to install Docker in the local environment of an existing Rails application [Rails 6 / MySQL 8]