@extending bootstrap 时找不到选择器
Selector not found when @extending bootstrap
我正在开始我的第一个 rails 项目。在这个项目中，我将使用 Bootstrap 和 SASS。我想避免（在大多数情况下）将与样式相关的 classes 放入我的 HTML 中，如 post:
中所述
Using Sass To Semantically @extend Bootstrap
我使用 Bower 并按照此处的说明将 bootstrap-sass 包含在我的项目中：
https://github.com/twbs/bootstrap-sass#bower-with-rails
现在 bootstrap 本身可以正常工作，因为我可以在我的 HTML 中使用它的 classes 并且一切都呈现得很好。但是如果我尝试用 Bootstrap class 扩展我的 classes 之一，例如：
.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 文件在 Bootstrap 之前加载有关，但我不知道该怎么做。
以下是我的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"
我该如何解决这个问题？
Bootstrap-Sass 文档建议从您的 application.sass 中删除要求，因为您 "will not be able to access the Bootstrap mixins or variables."
你应该删除
*= require_tree .
并确保 @import 所有相关文件（您似乎已经这样做了）。
require_tree 将自动包含您的 app/assets/stylesheet/ 文件夹下的所有样式表，并且肯定会引起一些重复甚至错误的加载顺序。而是通过按所需顺序导入文件 'manually' 来获得控制权。
现在 @extend 要么在 application.sass 中，要么在 @import 文件之后的另一个部分，你应该可以开始了。
Rails 5 和 Rails 6 failed to @extend 和 Undefined variable 的答案来自 SassC::SyntaxError
TL;DR: Rails 5 和 6 使用 app/assets/config/manifest.js 文件，默认情况下处理根文件夹 app/assets/stylesheets 中的所有 .scss 文件，而 Rails 4 只针对在 application.scss 中导入的文件。要修复 Rails 5 和 6 中的这些错误，可以：
- 将您的 SCSS 文件从
stylesheets 目录移动到样式表的子目录，因为默认情况下不处理子目录中的 .scss 文件。
- 修改
manifest.js文件只处理入口文件，如application.scss.
Link to relevant documentation in Sprockets.
扩展说明
要重现此错误，请在终端中 运行: bin/rails assets:precompile。您将收到一条错误消息，例如：
SassC::SyntaxError: Error: ".badge-title" failed to @extend ".text-center".
The selector ".text-center" was not found.
Use "@extend .text-center !optional" if the extend should be able to fail.
on line 47:11 of app/assets/stylesheets/badges.scss
我的application.scss：
@import "bootstrap-sprockets";
@import "badges";
// All bootstrap overrides go above
@import "bootstrap";
注意：badges.scss 期望 CSS .text-center 在上面的第一个 @import 语句中定义，但是 Sprockets 5+ 正在处理样式表目录中的所有文件，即使文件名有前导下划线.
修复：
- 我把
stylesheets/badges.scss移到了stylesheets/components/badges.scss
- 将我的 application.scss 文件中的第 2 行修改为
@import "components/badges.scss
希望这对某人有所帮助！
我正在开始我的第一个 rails 项目。在这个项目中，我将使用 Bootstrap 和 SASS。我想避免（在大多数情况下）将与样式相关的 classes 放入我的 HTML 中，如 post:
中所述Using Sass To Semantically @extend Bootstrap
我使用 Bower 并按照此处的说明将 bootstrap-sass 包含在我的项目中：
https://github.com/twbs/bootstrap-sass#bower-with-rails
现在 bootstrap 本身可以正常工作，因为我可以在我的 HTML 中使用它的 classes 并且一切都呈现得很好。但是如果我尝试用 Bootstrap class 扩展我的 classes 之一，例如：
.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 文件在 Bootstrap 之前加载有关，但我不知道该怎么做。
以下是我的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"
我该如何解决这个问题？
Bootstrap-Sass 文档建议从您的 application.sass 中删除要求，因为您 "will not be able to access the Bootstrap mixins or variables."
你应该删除
*= require_tree .
并确保 @import 所有相关文件（您似乎已经这样做了）。
require_tree 将自动包含您的 app/assets/stylesheet/ 文件夹下的所有样式表，并且肯定会引起一些重复甚至错误的加载顺序。而是通过按所需顺序导入文件 'manually' 来获得控制权。
现在 @extend 要么在 application.sass 中，要么在 @import 文件之后的另一个部分，你应该可以开始了。
Rails 5 和 Rails 6 failed to @extend 和 Undefined variable 的答案来自 SassC::SyntaxError
TL;DR: Rails 5 和 6 使用 app/assets/config/manifest.js 文件，默认情况下处理根文件夹 app/assets/stylesheets 中的所有 .scss 文件，而 Rails 4 只针对在 application.scss 中导入的文件。要修复 Rails 5 和 6 中的这些错误，可以：
- 将您的 SCSS 文件从
stylesheets目录移动到样式表的子目录，因为默认情况下不处理子目录中的.scss文件。 - 修改
manifest.js文件只处理入口文件，如application.scss.
Link to relevant documentation in Sprockets.
扩展说明
要重现此错误，请在终端中 运行: bin/rails assets:precompile。您将收到一条错误消息，例如：
SassC::SyntaxError: Error: ".badge-title" failed to @extend ".text-center".
The selector ".text-center" was not found.
Use "@extend .text-center !optional" if the extend should be able to fail.
on line 47:11 of app/assets/stylesheets/badges.scss
我的application.scss：
@import "bootstrap-sprockets";
@import "badges";
// All bootstrap overrides go above
@import "bootstrap";
注意：badges.scss 期望 CSS .text-center 在上面的第一个 @import 语句中定义，但是 Sprockets 5+ 正在处理样式表目录中的所有文件，即使文件名有前导下划线.
修复：
- 我把
stylesheets/badges.scss移到了stylesheets/components/badges.scss - 将我的 application.scss 文件中的第 2 行修改为
@import "components/badges.scss
希望这对某人有所帮助！