Rails Active Admin css conflicting with Twitter Bootstrap css

Question

I\'m somewhat new to the Rails asset pipeline so I might be doing something wrong. I\'m trying to use Active Admin for my backend and twitter bootstrap css for my front end

Answer 1

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

app/assets/stylesheets/active_admin.css.scss

to

vendor/assets/stylesheets/active_admin.css.scss

The active admin assets should be in vendor/ as mentioned in the rails guide:

"Vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks."

Answer 2

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

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

Answer 3

Have you watched the RailsCasts video on using ActiveAdmin? In the video, Ryan shows you how to prevent the ActiveAdmin CSS from stepping on your main app CSS.

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

Moving info from Video into answer

In the application.css you 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 that SO answer says this is not needed. I have not needed it so far.