[RUBY] [Rails] Comment appliquer le CSS utilisé dans l'application principale avec Administrer

Problème, ce que tu veux faire

** \\ Le CSS de l'application principale ne peut pas être utilisé /// **

C'est à ce moment que j'ai utilisé le gem ** Administrer pour créer un écran d'administration dans l'application Rails **. J'ai essayé d'appliquer le CSS appliqué à la vue de l'application principale aux vues sous admin, mais je ne peux pas ...

J'utilise le même nom de classe que l'application principale ... que dois-je faire? ?? ??

environnement

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

Conclusion

** Ajouter une destination pour la feuille de style Administrer **

** 1. Générez _styoesheet.html.erb avec rails g administrate: vues: layout **

terminal

#Exécuter dans le répertoire d'application correspondant
$ 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 #cet enfant! !! !!
      create  app/views/admin/application/_javascript.html.erb
      create  app/views/admin/application/_flashes.html.erb
      create  app/views/admin/application/_icons.html.erb

• Le fichier généré est erb, donc si l'environnement est haml, convertissez-le avec $ rails haml: erb2haml.

** 2. Ajoutez la destination de la feuille de style à _stylesheet.html.haml **

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

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

Cette description vous amènera à lire le fichier / assets / stylesheets / application.scss et, par conséquent, vous pourrez également appliquer les feuilles de style existantes à l'écran d'administration.

Article de référence

[Rails5] Changer la destination de lecture de la feuille de style Administrer --196Log

En dehors: personnaliser la mise en page existante

Je ne pense pas qu'il y ait beaucoup de demande, mais ** il est possible de modifier (personnaliser) la disposition de l'écran d'administration par défaut **.

Cela a également été répertorié dans Problèmes sur GitHub (Comment ajouter du CSS personnalisé? # 748).

terminal

#Exécuter dans le répertoire d'application correspondant
$ 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

De cette façon, la feuille de style est générée à la hâte, vous pouvez donc appliquer les modifications en modifiant la partie que vous souhaitez personnaliser.

Même ainsi, Administrate a ce genre de chose à chaque fois ... Il semble que cela puisse être transformé en série une fois qu'il est implémenté lol