Frage an css, twitter-bootstrap, ruby-on-rails, asset-pipeline – Rails Active Admin CSS widerspricht Twitter Bootstrap CSS

40

Ich bin etwas neu in der Rails-Asset-Pipeline, daher kann es sein, dass ich etwas falsch mache. Ich versuche, Active Admin für mein Backend und Twitter-Bootstrap-CSS für meine Front-End-Anwendung zu verwenden.

Ich habe die bootstrap.css hinzugefügt/ app / assets / stylesheets dann noch hinzugefügt:

<code>//= require bootstrap
</code>

an application.css - dann habe ich eine Vorkompilierung der Assets vor Ort durchgeführt

Es scheint gut zu funktionieren, aber ein Teil des Stils kommt nicht genau durch und ich denke, es liegt daran, dass das CSS des aktiven Administrators es überschreibt.

Nach meinem Verständnis kompiliert die Anwendung die CSS-Assets in das öffentliche CSS-Asset der Anwendung, und die Anwendung verwendet diese Datei, wenn sie ausgeführt wird.

Ich muss die zwei irgendwie trennen und es verwenden lassenTwitter Bootstrap CSS als Haupt-CSS auf dem Frontend und vielleicht sagen, es nicht zu verwendenAktive Admin-CSS Dateien auf dem Frontend.

Wie geht das am besten?

Warum ändert ActiveAdmin nicht einfach seine Klassendateien, um ein Präfix wie zu verwenden?_active-admin- damit sie mit nichts anderem in Konflikt stehen? So wie C-Bibliotheken. Ich denke, das ist ein Fehler in ActiveAdmin. Chloe

Deine Antwort

3   die antwort
28

zeigt Ryan Ihnen, wie Sie verhindern können, dass ActiveAdmin-CSS auf das CSS Ihrer Hauptanwendung zugreift.

http://railscasts.com/episodes/284-active-admin

Verschieben von Informationen aus dem Video in die Antwort

In der application.css entfernen Sie:

*= require_tree .

Für Schienen 4,Jiten K schlägt vor, dies hinzuzufügenproduction.rb:

config.assets.precompile += ['active_admin.css']

Einer der Kommentare zu dieser SO-Antwort besagt jedoch, dass dies nicht erforderlich ist. Ich habe es bisher nicht gebraucht.

Diese Methode funktioniert gut im Entwicklungsmodus, aber in der Produktion habe ich ein Problem beim Ausführenbundle exec rake assets:precompile: In meinem Fall werden die CSS-Dateien gemischt und die Datei bootstrap.css wird von ActiveaAdmin überschrieben. Irgendeine Idee?. Vielen Dank! CristianOrellanaBak
MattSlay ist richtig ... Ryans RailsCast (# 284) zeigt Ihnen, wie Sie das umgehen können (alles wegen des "require_tree." In application.css). Durch Entfernen / Bearbeiten wird das CSS-Problem behoben. craig.kaminsky
aber, aber, aberrequire_tree . ist die Magie, mit der alle Ihre CSS-Dateien von Rails auf magische Weise in eine verschmolzen werden ... Diese Antwort ist übertrieben und sollte nicht akzeptiert werden AlexChaffee
9

Für mich zu ändernapplication.css Folgendes löst das Problem:

<code> *= require bootstrap
 *= require_tree .
 *= stub "active_admin"
</code>
Das scheint für mich zu funktionieren, danke. Ich habe nicht genau herausgefunden, wasstub Würde es Ihnen etwas ausmachen, mir einen kurzen Hinweis zu geben? justinraczak
132

Ich hatte das gleiche Problem und konnte es durch Umzug beheben

<code>app/assets/stylesheets/active_admin.css.scss
</code>

zu

<code>vendor/assets/stylesheets/active_admin.css.scss
</code>

Die aktiven Administrator-Assetssollte in seinvendor/ wie in derSchienenführung:

"Der Anbieter / die Assets sind für Assets bestimmt, deren Eigentümer externe Einheiten sind, beispielsweise Code für JavaScript-Plugins und CSS-Frameworks."

funktioniert bei mir nicht theDazzler
Es löste das Problem auch für mich, für .scss- und .js-Dateien, so dass es weiterhin für Rails 5. + gültig ist Jules Corb
Hatte das gleiche Problem mit benutzerdefiniertem CSS, das ich hinzufügen wollte. Diese Lösung hat bei mir funktioniert. Jefrey Bulla
Jemand sollte einen PR einreichen, um dieses Problem zu beheben. mgold

Verwandte Fragen