Rails Active Admin css与Twitter Bootstrap css冲突

时间:2012-04-16 19:30:43

标签: ruby-on-rails css twitter-bootstrap asset-pipeline

我对Rails资产管道有些新意,所以我可能做错了什么。我正在尝试使用Active Admin作为我的后端和twitter bootstrap css用于我的前端应用程序。

我将bootstrap.css添加到 / app / assets / stylesheets 然后还添加了:

//= require bootstrap

到application.css - 然后我在本地进行了资产预编译

它似乎工作正常,但有些样式并没有完全实现,我认为这是因为主动管理员的css覆盖了它。

我的理解是应用程序将css资产编译到应用程序css公共资产中,应用程序在运行时使用该文件。

我需要以某种方式将两者分开,并使用 twitter bootstrap css 作为前端的主要css,并且可能告诉它不要使用主动管理员的css 文件在前端。

最好的方法是什么?

3 个答案:

答案 0 :(得分:132)

我遇到了同样的问题,并且能够通过移动

来修复它
app/assets/stylesheets/active_admin.css.scss

vendor/assets/stylesheets/active_admin.css.scss

活跃的管理资产 应该在vendor/中,如rails guide中所述:

“供应商/资产适用于外部实体拥有的资产,例如JavaScript插件和CSS框架的代码。”

答案 1 :(得分:28)

您是否在使用ActiveAdmin观看了RailsCasts视频?在视频中,Ryan向您展示了如何阻止ActiveAdmin CSS踩到主应用程序CSS。

http://railscasts.com/episodes/284-active-admin

将信息从视频转移到答案

在application.css中删除:

*= require_tree .

对于rails 4,Jiten K建议将其添加到production.rb

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

然而,有关该SO答案的评论之一表明这不是必需的。到目前为止我还没需要它。

答案 2 :(得分:9)

我将application.css更改为以下解决问题:

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