ruby-on-rails - @extending bootstrap 时找不到选择器

Question

我正在开始我的第一个 Rails 项目。在这个项目中，我将使用 Bootstrap 和 SASS。我想避免(在大多数情况下)将与样式相关的类放入我的 HTML 中，如本文所述:

Using Sass To Semantically @extend Bootstrap

我使用 Bower 并按照此处的说明在我的项目中包含了 bootstrap-sass:

https://github.com/twbs/bootstrap-sass#bower-with-rails

现在 Bootstrap 本身正在工作，因为我可以在我的 HTML 中使用它的类并且一切都呈现得很好。但是，如果我尝试使用 Bootstrap 类扩展我的一个类，例如:

.myClass
  @extend .text-muted

然后我收到以下错误:

".myClass" failed to @extend ".text-muted".
The selector ".text-muted" was not found.
Use "@extend .text-muted !optional" if the extend should be able to fail.

我想这可能与我在 Bootstrap 之前加载的 Sass 文件有关，但我不知道该怎么做。

以下是我的 application.css.sass的内容文件，其中有些内容是 *= require d 和其他人是 @import ed(我不确定这是否应该这样做)。

/*
 *= require components-font-awesome
 *= require_self
 *= require_tree .
 */
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/"
@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets"
@import "bootstrap-sass/assets/stylesheets/bootstrap"

我怎么解决这个问题？

Answer 1

Bootstrap-Sass 文档建议从您的 application.sass 中删除需求。 ，因为您“将无法访问 Bootstrap mixins 或变量”。

你应该删除

*= require_tree .

并确保 @import所有相关文件(您似乎已经这样做了)。
require_tree将自动包含您的 app/assets/stylesheet/ 下的所有样式表文件夹，肯定会引起一些重复，甚至是错误的加载顺序。而是通过按所需顺序“手动”导入文件来获得控制权。

现在 @extend在 application.sass 内或在你的不同部分 @import在 Bootstrap 文件之后，您应该一切顺利。