Question

以下代码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;
}

此文件位于＆＃39;样式表＆＃39;目录。还有＆＃39; home.css.scss＆＃39;文件在同一个目录中。但是如果我从“应用程序”中移除这种风格的话。提交给＆＃39; home＆＃39;文件浏览器没有看到这种风格。有什么麻烦？我该如何解决？谢谢！

Answer 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 .

这更有意义。

Answer 2

来自Rails Asset Pipeline文档：

如果要使用多个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，你可以更好地控制样式表的加载顺序。

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

2 个答案: