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.

我想这可能与我在引导程序之前加载的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或变量。＆＃34;

你应该删除

*= require_tree .

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

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

现在@extend位于application.sass内，或者位于引导程序文件之后@import的不同部分中，您应该很高兴。

@extending bootstrap时找不到选择器

1 个答案: