Rails Active Admin css conflicting with Twitter Bootstrap css

☆樱花仙子☆ 提交于 2019-12-17 10:19:18

问题


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?


回答1:


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.




回答2:


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




回答3:


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

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


来源:https://stackoverflow.com/questions/10180418/rails-active-admin-css-conflicting-with-twitter-bootstrap-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!