@extending bootstrap 时找不到选择器

Question

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

使用 Sass 在语义上@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文件的内容，其中有些是*= required，有些是@imported（不知道是不是应该这样处理）。

/*
 *= 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 文档建议从您的 中删除 requires application.sass，因为您“将无法访问 Bootstrap 混合或变量”。

你应该删除

*= require_tree .

并确保@import所有相关文件（您似乎已经这样做了）。

require_tree将自动包含您app/assets/stylesheet/文件夹下的所有样式表，并且肯定会引起一些重复甚至错误的加载顺序。而是通过按所需顺序“手动”导入文件来获得控制权。

现在，@extend无论是在引导文件之后application.sass还是在不同的部分中，您@import都应该很高兴。