41

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 application.

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

//= require bootstrap

to application.css - then I did a precompile of the assets locally

It seems to work fine but some of the styling isn't coming through exactly and I think it's because active admin's css is overriding it.

My understanding is that the application compiles the css assets into the application css public asset and the application uses that file when running.

I need to somehow separate the two and make it use twitter bootstrap css as the main css on the front end and maybe tell it not to use active admin's css files on the front end.

What's the best way to do this?

anusha
  • 2,087
  • 19
  • 31
RailsTweeter
  • 1,625
  • 3
  • 18
  • 33
  • 1
    Why doesn't ActiveAdmin just change their class files to use a prefix like `_active-admin-` so they don't conflict with anything else? The way C libraries do. I think this is a bug in ActiveAdmin. – Chloe Jun 07 '18 at 02:29

3 Answers3

132

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."

Abram
  • 39,950
  • 26
  • 134
  • 184
Loren
  • 3,476
  • 3
  • 23
  • 15
  • It works fine when running `bundle exec rake assets:precompile`?. In my case, the css files finish mixed and bootstrap.css is overwritten by activeadmin. Any idea?. – CristianOrellanaBak Mar 26 '14 at 15:55
  • 10
    And do the same for `active_admin.js`. Move it to `vendor/assets/javascripts/active_admin.js` – Arcolye May 04 '15 at 05:39
  • 3
    Someone should submit a PR to fix this upstream. – mgold Jul 05 '15 at 17:00
  • This is a perfect solution. Why load up a bunch of extra css outside of the /admin namespace if you don't need to (even if it doesn't conflict)? Only slows down page load time for average user. – Abram Dec 28 '16 at 03:07
  • It solved the problem for me too, for .scss and .js files, so it is still valid for rails 5.+ – Uj Corb Jul 05 '18 at 17:01
  • Had the same problem with custom CSS I wanted to add. This solution worked for me. – Jefrey Bulla Aug 22 '18 at 22:01
  • after I moved, I got this error ' The asset "active_admin.css" is not present in the asset pipeline. ' – Jin Lim Nov 22 '19 at 20:06
29

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.

Community
  • 1
  • 1
MattSlay
  • 9,115
  • 5
  • 43
  • 52
  • 3
    MattSlay is correct ... Ryan's RailsCast (#284) will show you how to get around this (it's all because of the "require_tree ." in application.css). Removing/editing that will resolve the CSS issue. – craig.kaminsky Apr 25 '12 at 18:03
  • This method works fine for me in development mode, but in production I have a problem when run `bundle exec rake assets:precompile`: in my case, the css files finish mixed and bootstrap.css is overwritten by ActiveaAdmin. Any idea?. Thanks! – CristianOrellanaBak Mar 26 '14 at 16:05
  • 1
    but but but `require_tree .` is the magic that lets all your CSS files get magically smooshed into one by Rails... this answer is overkill and should be un-accepted – AlexChaffee Nov 04 '16 at 19:13
12

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

 *= require bootstrap
 *= require_tree .
 *= stub "active_admin"
sadaf2605
  • 7,332
  • 8
  • 60
  • 103