css - 脚手架 CSS 与 Bootstrap CSS 混合用于 error_explanation/field_with_errors

Question

我一直在关注 Michael Hartl 的 Ruby on Rails 教程，以使用 Bootstrap 表单验证而不是内置的 RoR 样式。我的页面应该看起来像这样(通过检查器删除了样式):

相反，我得到:

我有以下 custom.scss

 @import "bootstrap-sprockets";
 @import "bootstrap";

 #error_explanation {
     color: red;
     ul {
         color: red;
         margin: 0 0 30px 0;
     }
 }

 .field_with_errors {
     @extend .has-error;
 }

这是 View 的样子:

<% if game.errors.any? %>
  <div id="error_explanation">
      <div class="alert alert-danger">
          <%= pluralize(game.errors.count, "error") %> prohibited this game from being saved:
      </div>
      <ul>
          <% @game.errors.full_messages.each do |msg| %>
              <li><%= msg %></li>
          <% end %>
      </ul>
  </div>

...

<div class="form-group">
<%= f.label :game_name, :class => "col-sm-2 control-label" %>
<div class="col-sm-10">
    <%= f.text_field(:game_name, {:class => "form-control"}) %>
</div>
</div>

我已经尝试寻找让 Bootstrap 覆盖 scaffold.scss 的方法，所以我将下面显示的 require custom 放在我的 application.css 中

*= require_tree .
*= require_self
*= require custom

我在此类问题上看到的大多数 SO 问题只是由于针对当前版本的 Bootstrap 使用了错误的类而没有显示 Bootstrap 类，但这些类正在正确加载，就在脚手架旁边CSS。

Answer 1

脚手架样式表并没有真正覆盖您的自定义样式表。它向 #error_explanation 和 .field_with_errors 添加了额外的属性。

属性如 padding: 2px;背景色:红色；显示:表格； ETC。在一天结束时， Assets 管道将所有样式表连接在一起，导致您描述的问题。

如果您不需要保留脚手架样式表，只需转到 app/assets/stylesheets/ 并删除 scaffolds.scss。但是，如果您希望保留脚手架样式表，则需要考虑手动编辑它，或者您可能希望为应用程序的不同部分呈现不同的布局。

.field_with_errors 定义与 Michael Hartl's tutorial 中的定义也存在细微差别。看起来像这样:

.field_with_errors {
  @extend .has-error;
  .form-control {
    color: $state-danger-text;
  }
}