web-dev-qa-db-fra.com

Rails Active Admin css en conflit avec Twitter Bootstrap css

Je suis quelque peu nouveau dans le pipeline d'actifs Rails donc je peux faire quelque chose de mal. J'essaie d'utiliser Active Admin pour mon backend et Twitter bootstrap css pour mon application frontale.

J'ai ajouté le bootstrap.css à / app/assets/stylesheets puis j'ai également ajouté:

//= require bootstrap

à application.css - puis j'ai fait une précompilation des actifs localement

Cela semble bien fonctionner mais une partie du style ne passe pas exactement et je pense que c'est parce que le CSS de l'administrateur actif le remplace.

Ma compréhension est que l'application compile les actifs css dans l'actif public css de l'application et l'application utilise ce fichier lors de l'exécution.

Je dois en quelque sorte séparer les deux et le faire utiliser Twitter bootstrap css comme css principal sur le front-end et peut-être lui dire de ne pas utiliser actif css de l'administrateur fichiers sur le front-end.

Quelle est la meilleure façon de procéder?

ruby-on-railscsstwitter-bootstrapasset-pipeline
40
RailsTweeter

Avez-vous regardé la vidéo RailsCasts sur l'utilisation d'ActiveAdmin? Dans la vidéo, Ryan vous montre comment empêcher le CSS ActiveAdmin de marcher sur le CSS de votre application principale.

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

Déplacement des informations de la vidéo vers la réponse

Dans le fichier application.css, vous supprimez:

*= require_tree .

Pour Rails 4, Jiten K suggère d'ajouter ceci à production.rb:

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

Cependant, l'un des commentaires à ce sujet SO réponse dit que ce n'est pas nécessaire. Je n'en ai pas eu besoin jusqu'à présent.

28
MattSlay

J'ai eu le même problème et j'ai pu le résoudre en déplaçant

app/assets/stylesheets/active_admin.css.scss

à

vendor/assets/stylesheets/active_admin.css.scss

Les ressources d'administration actives doivent être dans vendor/ comme mentionné dans le Guide Rails :

"Le fournisseur/actifs est pour les actifs qui appartiennent à des entités externes, comme le code pour les plugins JavaScript et les frameworks CSS."

132
Karen

Pour moi changer application.css à ce qui suit résout le problème:

 *= require bootstrap
 *= require_tree .
 *= stub "active_admin"
9
sadaf2605