[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
How to add sound in the app (swift)
[Swift] How to link the app with Firebase
[Rails] How to get the user information currently logged in with devise
How to display the text entered in text_area in Rails with line breaks
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
Organized how to interact with the JDK in stages
[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]
How to get started with creating a Rails app
[Rails] How to display an image in the view
[With back tricks] How to introduce React to the simplest Rails
How to specify db when creating an app with 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
[Rails] How to write in Japanese
Place in the middle with css
How to introduce jQuery in Rails 6
How to get along with Rails
How to install Swiper in Rails
[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
[Rails] How to reset the database in production environment (Capistrano version)
How to write the view when Vue is introduced in Rails?
How to implement search functionality in Rails
[Rails] How to use rails console with docker
How to insert a video in Rails
How to use MySQL in Rails tutorial
How to get the date in java
How to implement ranking functionality in Rails
How to use credentials.yml.enc introduced in Rails 5.2
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
[Rails] How to log in with a name by adding a devise name column
How to compare only the time with Rails (from what time to what time, something like)
How to debug the processing in the Ruby on Rails model only on the console
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"
[Rails] How to read the XML file uploaded from the screen with Hash type
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
How to prevent direct URL typing in Rails
The code I used to connect Rails 3 to PostgreSQL 10