Rails 不包含使用 require_tree 和 scss 的样式答案

【问题标题】：Rails does not include styles using require_tree and scssRails 不包含使用 require_tree 和 scss 的样式
【发布时间】：2015-01-04 09:10:05
【问题描述】：

有如下代码application.css.scss：

@import "bootstrap-sprockets";
@import "bootstrap";

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */
.table tbody > tr > td.vertical-align {
    vertical-align: middle;
}

此文件位于“样式表”目录中。同一目录中还有“home.css.scss”文件。但是，如果我将此样式从“应用程序”文件移动到“主”文件，浏览器将看不到这种样式。有什么问题？我该如何解决？谢谢！

【问题讨论】：

只需取消注释 application.css.scss 中的 require_tree .
@CbaBhusal 你在哪里看到require_tree 被评论？
在您发布的代码中，有 require_tree 注释见
@CbaBhusal 没有评论！这是资产清单在 Rails 中编写的方式。首先阅读文档guides.rubyonrails.org/asset_pipeline.html。它在*= require_self 之后有*= require_tree .。
我知道你没有评论，但是你可以重写那些。

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

在我的情况下，我在文件末尾导入了 bootstrap，后跟样式，这一定是问题

 *= require_tree .
 *= require_self
 */

@import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";

.table tbody > tr > td.vertical-align {
  vertical-align: middle;
}

我还要说你应该尝试将require tree 放在require self 之后：

 *= require_self
 *= require_tree .

这更有意义。

【讨论】：

【解决方案2】：

来自 Rails 资产管道文档：

如果你想使用多个 Sass 文件，你通常应该使用 Sass @import 规则而不是这些 Sprockets 指令。当使用 Sprockets 指令时，Sass 文件存在于它们自己的范围内，使得变量或 mixin 仅在它们被定义的文档中可用。 http://guides.rubyonrails.org/asset_pipeline.html

因此，在您的情况下，您可以将您在 application.css.scss 中声明的样式移动到一个单独的文件中（例如：table_styles.css.scss），然后将您的清单文件重写为：

@import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";
@import "table_styles";
// Import any other files that would have been imported by require_tree

这种方法的优点是您可以使用 sass 变量和 mixin，并且可以更好地控制样式表的加载顺序。

【讨论】：