how to stop an active_admin css.scss file changing the whole look of my application

Question

I have a ruby on rails project, ruby2 and rails4. I've got the bootstrap-sass gem installed. I recently installed the activeadmin gem, which adds a file active_admin.css.scss to my app/styles folder:

// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.css.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;

// Active Admin's got SASS!
@import "active_admin/mixins";
@import "active_admin/base";

// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
//   .status_tag { background: #6090DB; }

Now the buttons and forms throughout my project, which I've designed with bootstrap class, look all different. It's like the active_admin.css.scss is over-riding my whole project. When I comment out the below lines like so:

   // @import "active_admin/mixins";
   // @import "active_admin/base";

My original buttons return, but ActiveAdmin is a mess to look at.Any idea how I can sort out this problem - just have active_admin.css.scss deal with my actice_admin stuff, and leave the rest alone?

Answer 1

Usually admin area has its own layout and assets (javascripts and stylesheets). I doubt there's any need to include active_admin assets in your app's none admin pages.

If your application.css includes all stylesheets by default with this:

*= require_true .

Then copying 3rd-party assets into assets folder will break your style as you describe. Consider changing it to include stylesheets explicitly or using the methods described in this article:

http://mrdanadams.com/2011/exclude-active-admin-js-css-rails/

The article is 3 years old so it's possible parts of it have to be changed, but the idea is there.

Answer 2

A better solution that works for Rails 4 is to move active_admin css and javascript files to /vendor. To load the assets correctly in production, add the following lines to config/environments/production.rb:

config.assets.precompile += 
%w( #{Rails.root}/vendor/assets/stylesheets/active_admin.css.scss)
config.assets.precompile += 
%w( #{Rails.root}/vendor/assets/javascripts/active_admin.js.coffee)

I found the fix in this issue.