@ 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

现在，引导程序本身正在运行，因为我可以在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（我不确定这是否应该做）。

/*
 *= 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混合或变量。”

您应删除

*= require_tree .

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

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

现在@extend在application.sass内部，或者在引导文件之后与@import不同的部分中，您应该会很好。

Answer 2

[Rails 5 and Rails 6 Answers forfailed to @extendandUndefined variablefrom SassC::SyntaxError