How to stop active_admin css.scss file that changes the whole look of my application

Question

I have a ruby ​​on rails, ruby2 and rails4 project. I have bootstrap sass installed. I recently set the activeadmin attribute, which adds the active_admin.css.scss file to my application / styles folder:

// SASS variable overrides must be declared before loading up Active Admin 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 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 in my project, which I developed using the bootstrap class, look completely different. This is similar to active_admin.css.scss, overloading my entire project. When I comment on the following lines as follows:

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

My original buttons are coming back, but ActiveAdmin is a mess to watch. Any idea how I can figure this out - just activate active_admin.css.scss with my actice_admin stuff and leave the rest alone?

Answer 1

Thanks to the investigation started by James Chen below (and thanks to Ryan Bates!), I found this video: http://railscasts.com/episodes/284-active-admin

By the end of the video, he fixes my problem. I don’t mind, but a few days ago I watched the first part of the video to set the active_admin gem installed, and then stopped.

Basically, if you have sass installed, change the application.css file to application.css.scss and some other small bits and bobs.

Answer 2

Usually the admin area has its own layout and assets (javascripts and style sheets). I doubt that your application has any active_admin attributes, not admin pages.

If your application.css includes all stylesheets by default:

*= require_true .

Then copying third-party assets to the resource folder will violate your style, as you described. Consider modifying it to explicitly include stylesheets or use the methods described in this article:

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

The article is 3 years old, so its parts can be changed, but there is an idea.

Answer 3

The best solution that works for Rails 4 is to move the css and javascript active_admin files to / vendor. To properly load assets during 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 a fix in this issue .

Answer 4

Thanks to James Chen and Dan Adam's blog link. I decided to combine two articles in this answer. The following steps should solve the problem with Rails 4.0:

1 - make sure that in Active Directory there are no active root folders that apply to the entire application:

 cd app/assets/javascripts mkdir admin mv active_admin.js.coffee admin/ cd ../stylesheets mkdir admin mv active_admin.css.scss admin/ 

2 - And really, make sure that assets are not included, by editing both assets/stylesheets/application.css and assets/javascripts/application.js files change require_tree . on require_directory .

3 - Now you need to change your Active Admin initializer to capture the two files that you just excluded in steps 1 and 2: In the config/initializers/active_admin.rb add the following lines:

 config.clear_stylesheets! config.register_stylesheet 'admin/active_admin.css' config.clear_javascripts! config.register_javascript 'admin/active_admin.js' 

Answer 5

As @Karen pointed out in this Rails Active Admin css conflict conflicting with Twitter Bootstrap css , you can simply move the active_admin.css.scss from app/assets/stylesheets to vendor/assets/stylesheets