Rails Active Admin css与Twitter Bootstrap css冲突

Question

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

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

//= require bootstrap

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

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

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

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

最好的方法是什么？

Answer 1

我有同样的问题,并能够通过移动来解决它

app/assets/stylesheets/active_admin.css.scss

至

vendor/assets/stylesheets/active_admin.css.scss

主动管理的资产应该是vendor/如提到的导轨导向:

"供应商/资产是由外部实体拥有的资产,例如JavaScript插件和CSS框架的代码."

Answer 2

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

将视频中的信息移动到答案中

在application.css中删除:

*= require_tree .

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

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

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

MattSlay是正确的...... Ryan的RailsCast(#284)将告诉你如何解决这个问题(这都是因为application.css中的"require_tree.").删除/编辑将解决CSS问题. (3认同)

Answer 3

对我来说,application.css改为以下解决问题:

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