Rails Active Admin css conflicting with Twitter Bootstrap css

Question

I'm a little new to the Rails pipeline, so I might be doing something wrong. I am trying to use Active Admin for my backend and twitter bootstrap css for my external application.

I added bootstrap.css to / app / assets / stylesheets and then added:

//= require bootstrap 

in application.css - then I did the precompilation of the assets locally

Everything seems to be fine, but some of the styles don't work out for sure, and I think because the active admin css overrides it.

I understand that the application compiles css assets into the css share of the application, and the application uses this file at startup.

I need to somehow separate the two and get twitter bootstrap css to be used as the main css on the front side and, perhaps, to say that I do not use active admin css files on the front panel.

What is the best way to do this?

Answer 1

Have you watched RailsCasts videos using ActiveAdmin? In the video, Ryan shows you how to prevent ActiveAdmin CSS from being included in the main CSS application.

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

Move information from video to response

In application.css you will remove:

 *= require_tree . 

For rails 4, Jiten K suggests adding this to production.rb :

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

However, one of the comments on this SO answer says this is not necessary. I still did not need this.

Answer 2

I had the same problem and I was able to fix it by moving

 app/assets/stylesheets/active_admin.css.scss 

to

 vendor/assets/stylesheets/active_admin.css.scss 

Active admin attributes must be in vendor/ as specified in the rails guide :

"Provider / assets are assets owned by external organizations, such as code for JavaScript plugins and CSS frameworks."

Answer 3

For me, changing application.css to the following solves the problem:

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