My css file is overridden due to activeadmin

Question

First I have created an active_admin css file as app/assets/stylesheets/active_admin.css.scss

/* active_admin.css.scss */
@import "active_admin/mixins";
@import "active_admin/base";

/* application.css.scss*/
@import "active_admin.css.scss"

So I have a lot of css of mine been overriden, I followed instructions of this post but still doesn't work. I changed files location from app/assets/stylesheets/active_admin.css.scss to vendor/assets/stylesheets/active_admin.css.scss but still having the problem.

So, how can I load activeadmin css files only when needed?

score 79 · Answer 1 · answered May 27 '14 at 13:23

79

Based on seanlinsley comment on selected answer and nathan's answer too, it seems to me that the 'cleanest' way is indeed to move active_admin.css.scss from app/assets/stylesheets/ to vendor/assets/stylesheets/.

No need to any other (configuration) modification: 'main' app has it's styles back to normal and AA display is normal too.

(I didn't want to manually include each of my ressources instead of require_tree ... !)

This is the way AA is getting into: AA (still) opened issue on the matter.

answered May 27 '14 at 13:23

gfd

1,281
1
13
19

7

Thanks. This is best solution for Rails 4.1. – Dan Kohn Aug 02 '14 at 22:12
1

Simplest solution is always the best :-) am curious to know more of how this works though? will look into vendor assets more and how they are compiled – Richlewis Nov 30 '15 at 14:03
1

@Richlewis I am interested in your findings: to my knowledge, vendor assets are traditionally "installed" by gems so my "solution" is more of a hack (but still the "cleanest" in my point of view). Please feel free to comment if I'm mistaken...) – gfd Dec 28 '15 at 15:29
Just for record, this solution **doesn't** work for **Rails 2.2** – CelsoDeSa Feb 11 '19 at 19:57
1

This worked for me on Rails 6.1.4 – sandypockets Sep 18 '21 at 01:27
1

Yup, it worked for me as well. **Rails 7** – Piyush Chaudhary Feb 24 '23 at 11:03

score 23 · Accepted Answer · answered Oct 10 '13 at 19:45

23

For active_admin to play nice don't include it in the application.css, i.e.: remove the

require_tree .

and require each file separately inside app/assets/stylesheets but don't put active_admin.css

and on config/production.rb put this

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

answered Oct 10 '13 at 19:45

jimagic

4,045
2
28
49

this line will make the active admin css available to admin section --> config.assets.precompile += ['active_admin.css'] – jimagic Oct 10 '13 at 19:49
you have to list/put all the CSS name there inside application.css except active_admin.css and remove --> require_tree – jimagic Oct 10 '13 at 19:50
3

Two things: 1. Adding active_admin.css to the precompile list isn't necessary; AA already does that. 2. There's an open ticket to deal with the problem described here: https://github.com/gregbell/active_admin/issues/2514 – seanlinsley Oct 11 '13 at 03:56

score 14 · Answer 3 · edited Mar 13 '19 at 22:43

14

What worked for me (Rails 5) was adding the following line on my app/assets/stylesheets/application.css after the *= require_self line:

*= stub "active_admin"

edited Mar 13 '19 at 22:43

apb

3,270
3
29
23

answered May 17 '17 at 00:19

Maya Novarini

319
4
6

score 3 · Answer 4 · answered Apr 09 '14 at 03:59

3

Remove this line from your app/assets/stylehseets/application.css.sass

*= require_tree ../../../vendor/assets/stylesheets/

Move active_admin.css.scss to vendor/assets/stylesheets/

answered Apr 09 '14 at 03:59

Natus Drew

1,876
1
21
23

score 2 · Answer 5 · edited Jan 05 '19 at 05:05

This is the link that addresses this issue. I am reposting an existing answer that I found very helpful because it also addressed the js issues. Again Not My Answer.

https://github.com/activeadmin/activeadmin/issues/3819#issuecomment-351377822

arif362 commented on Dec 13, 2017

the same problem I faced and I have solved this following below:

Firstly you have to create a directory named assets in the vendor directory,

Then in the assets directory of vendor folder, you have to create two directories (i) stylesheets and the second one is (ii) javascripts.

After that, you have to move the active_admin.scss file from assets/stylesheets to vendor/assets/stylesheets and the active_admin.js.coffee file from assets/javascripts to vendor/assets/javascripts,

And finally, restart your rails server then reload your apps. Hope this will work for you.

score 1 · Answer 6 · answered Sep 16 '21 at 05:20

1

This post is pretty old, so I figured including my recent findings with an updated version of Rails (6.1.4) was worth it.

Moving active_admin.css.scss from app/assets/stylesheets/ to vendor/assets/stylesheets/ worked for me too.

Using Rails 6.1.4

answered Sep 16 '21 at 05:20

sandypockets

350
3
13

1

Good to know @sandypockets ! If I'm not mistaken, this is the option I suggested. If so, could you please say so in a comment in my solution for later visitors to know that it's a viable solution. Thanks ! – gfd Sep 17 '21 at 14:11
Unfortunately I don't have enough reputation to add a comment to your solution. But I did upvote it before leaving my own comment as an answer. But your solution is definitely what guided me that way, so thank you! – sandypockets Sep 17 '21 at 20:00

My css file is overridden due to activeadmin

6 Answers6

Linked