Ruby field_with_errors 不 @extend .control-group .error

Posted 2023-03-06

【中文标题】Ruby field_with_errors 不 @extend .control-group .error

【英文标题】：Ruby field_with_errors doesn't @extend .control-group .error

【发布时间】：2013-11-23 21:48:16

【问题描述】：

好的。我想不通。问题是 @extend 在 css 中不起作用。我有css：

@import "bootstrap";

.field_with_errors 
  @extend .control-group;
  @extend .error;

它不会突出显示具有 div 类 .field_with_errors 的字段。我不知道为什么，它适用于我制作的其他应用程序。如果我用 CSS 编写类似 color: #f00; 的东西 - 这很有效。出于某种原因，它只是不@extend。有什么想法吗？

表格：

<h1>Report</h1>
<div class="row">
   <div class="span6 offset3">
    <%= form_for(@problem) do |f| %>
      <%= render 'shared/error_messages' %>

      <%= f.label :name, raw("Your name:") %>
      <%= f.text_field :name %>

      <%= f.label :email, raw("E-mail address (for confirmation):") %>
      <%= f.text_field :email %>

      <%= f.label :description, raw("Enter a description of the problem:") %>
      <%= f.text_area :description %>

      <%= f.submit "Submit", class: "btn btn-large btn-primary" %>
    <% end %>
  </div>
</div>

可能是一个愚蠢的问题，我一定错过了什么。我只是不知道它是什么，并且真的希望它像以前一样工作。任何帮助表示赞赏！

编辑： 在查看了 bootstrap-sass 文件后，我意识到我能够@extend 文件中的类（例如@extend .form-control 有效）。所以一定是.error和.control-group不存在！！它去了哪里，我仍然无法弄清楚，除非他们像一周前那样改变它。 ：/

【问题讨论】：

@extend 用于 SASS，也就是 scss 文件。您的 CSS 文件是否以 .scss 结尾？

是的，文件是custom.css.scss

也许我能弄清楚这些类的定义位置（.error 和 .control-group）。就好像它们没有定义或者它们无法以某种方式导入。 Sass 有效，我通过创建一个类并将其扩展到另一个类中进行了测试。

.control-group 不在 Bootstrap 3 中，它已替换为 .form-group 和 .error 不是 Bootstrap 的一部分，它可能在脚手架 css 中定义，但你现在可能不包括它，或者顺序正确吗？

当你运行 rails generate scaffold MyController 时，它会为你创建一些基本的 css，我相信其中包括一个 .error 类。我认为问题就像你所说的那样——你不能扩展不存在的东西。 .control-group 不在引导程序 3 中，如果您没有使用脚手架 css 或一开始没有脚手架任何控制器，则可能不会定义 .error。我假设您正在通过 html sn-p 使用 Rails，但也许您没有。

【参考方案1】：

正如“soup”的评论所指出的，问题是由安装 Bootstrap 3 然后调用 Bootstrap 2 类名引起的。类名已经改变（看看here）。正确的代码是：

.field_with_errors 
  @extend .has-error;

因此必须将错误消息包装在其中（另请参阅here）：

div class="alert alert-danger"

因此，在您的 app\views\shared\_error_messages.html.erb-partial（您可能正在重用 Michael Hartl 的 Rails 教程中的代码）中，将 div class="alert alert-error" 更改为 div class="alert alert-danger"。因为你的代码太远了，我给你一个适应 Bootstrap 3 的版本：

<h1>Report</h1>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <%= form_for(@problem) do |f| %>
        <%= render 'shared/error_messages' %>
          <div class="form-group">
            <%= f.label :name, raw("Your name:") %>
            <%= f.text_field :name, class: 'form-control' %>
          </div>
          <div class="form-group">
            <%= f.label :email, raw("E-mail address (for confirmation):") %>
            <%= f.text_field :email, class: 'form-control' %>
          </div>
          <div class="form-group">
            <%= f.label :description, raw("Enter a description of the problem:") %>
            <%= f.text_area :description, class: 'form-control' %>
          </div>
        <%= f.submit "Submit", class: "btn btn-lg btn-primary" %>
      <% end %>
    </div>
  </div>

【讨论】：

很抱歉，我在下面发布的解决方案更好。

遇到这个问题的人比我想象的要多，所以我稍微完善了我的答案。 @Christiano：我不太明白你的意思。如果您使用该教程，您应该使用那里提到的代码。我只引用它是因为 OP 显然重用了它的代码。如果您也想这样做，则必须安装正确的 gem（如 gem 'bootstrap-sass', '~> 3.0.3.0'）并将所有类名更改为 Bootstrap 3。

+1，谢谢！这绝对应该是一个正确的答案！非常适合我。

【参考方案2】：

如果有人因为它不能与 LESS 一起工作而使用它（就像我一样），我必须这样做：

.field_with_errors .form-control 
  &:extend(.has-error .form-control);


.field_with_errors .form-control:focus 
  &:extend(.has-error .form-control:focus);

当我尝试使用时：

.field_with_errors 
  &:extend(.has-error);

这相当于我发现使用 bootstrap 3 样式来解决错误的推荐方式，LESS 没有做任何事情。这可能与 bootstrap 3 中提到 has-error 的选择器总是将其与其他内容结合在一起这一事实有关，例如：

.has-error .form-control 

无论如何 - 上述解决方案对我有用，所以希望它可以帮助其他人。

【讨论】：

这是一种奇怪的行为。我不知道为什么会发生这种情况，但对于 Rails 应用程序，它通常是使用 SASS 最轻松的方法。您应该考虑使用 Bootstrap-SASS-Gem：github.com/twbs/bootstrap-sass

不幸的是，这似乎对我也不起作用，但我觉得我正朝着正确的方向前进。所以这是一个赞成票。

【参考方案3】：

我想通了。这与 Twitter-Bootstrap 相关，其中有一个 .alert 类。那是负责以正确样式显示错误的类。 Bootstrap 安装谁知道在哪里并且最容易通过浏览器中的开发人员工具访问（这很糟糕）。我找不到 gem 的来源（它指向不是文件夹的文件夹）。所以我将 twitter css 文件从 github 直接复制到我的应用程序 -> vendor/assets/stylesheets 中。现在我可以处理这个问题了。 我在其中一个引导文件 (_alerts.scss) 中更改了 .alert 类的样式，并在我的 custom.css.scss 文件中添加了额外的类，以使输入周围的边框在错误时变为红色。 不知何故，这整件事在我以前制作的应用程序中效果更好，我认为这与他们对引导程序所做的更改有关，并且可能与我弄乱引导程序的原始设计（如全角标题）有关。 让我找到解决方案的最重要的事情是课程是.alert，而不是我想的.error。也非常感谢浏览器开发工具，没有你我找不到我的文件。

编辑： 这是在 Bootstrap 上获取文件的下载说明： http://getbootstrap.com/getting-started/#download

【讨论】：

抱歉，这确实是走错了方向。我发布了一个新答案，反映了 Bootstrap 3 中类名的变化。在这方面，您的解决方案实际上有点将 Bootstrap 3 恢复为 Bootstrap 2。

所以你不使用引导 gem 而只使用 vendor/assets/stylesheets 中的 css 文件？如果您想直接更改引导文件，这是一个选项。但是，如果您在 custom.css.scss 中处理正确的类，则无需这样做。使用 gem 更加方便和'rails-like'。我还认为几乎所有面对给定错误消息的用户都会遇到相同的问题：使用 bootstrap 2 代码进行 bootstrap 3 gem。他们应该只安装正确的 gem 版本或更改他们的代码。像您建议的那样重新定义类并不是该错误消息的正确答案。

或者可以这样说：你走错了方向。而不是使用旧引导版本的样式，然后将它们强制返回引导源，您应该使用已经存在的内容并调用正确的样式。

好吧，这是一个有效的观点。我明白为什么以这种方式安装它可能更好。我试图说明的是，这只是没有必要的。这有点矫枉过正:-) 问题：试图突出显示.field_with_errors 会引发错误消息。解决方法：按照Bootstrap 3类名改3行代码。是否使用 gem 在这里并不重要。当然，您指出实现引导程序的另一种方法是有帮助的。

解决方案很短并不能让它变得更好。我很高兴我在这里遵循了我的答案，因为我在不同的项目中不止一次遇到过这个问题和相关问题，而这个解决方案解决了所有问题。

【参考方案4】：

按照 3.x 升级您的代码应该可以工作

.field_with_errors 
  @extend .has-error;

【参考方案5】：

这个错误是因为在 application.scss 中有下面一行

*= require_tree .

它被放置在@import "bootstrap"之前。

所以，_custom.scss 已经在 Bootstrap 之前被包含了。

【参考方案6】：

修复它的最简单方法（对我有用的方法）是将!optional 添加到两个类中：

.field_with_errors 
  @extend .control-group !optional;
  @extend .error !optional;

【讨论】：

实际上，添加!optional 并不能解决上述问题——这只是在.error 等无法扩展的情况下抑制错误的方法。

【参考方案7】：

好的，在追了几天这个问题后，我弄清楚了问题所在。

您需要在 custom.css.scss 文件的顶部包含引导程序。

@import 'bootstrap';

我的猜测是这包括自定义文件中的所有类，以便您以后可以引用它们。我假设如果您使用一些引导 gem，它将使它们在全球范围内可用，但如果您像我一样使用香草，那么您需要使用上面的代码。

【讨论】：

与此问题无关：OP 正在导入必要的文件。