Question

我一直在寻找所有地方，但我无法弄清楚如何将一个样式表优先于另一个。这就是我在app/assets/stylesheets/application.css中所拥有的：

/*
 * 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 any plugin's vendor/assets/stylesheets directory 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
 */

/* Master Reset */
body {
  background-color: #000;
}

对于名为welcome.scss的控制器，我在同一目录中也有一个名为welcome的文件：

// Place all the styles related to the welcome controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

body {
  background-color: orange;
}

h4 {
  color: #fff;
}

我希望我可以使用application.css输出的内容覆盖welcome.scss的CSS，但我的HTML输出按以下顺序排列：

<link rel="stylesheet" media="all" href="/assets/welcome.self-6767494a578e8cc2f59dd92fa7081a577973e0fdcd72f58e91863e405fcf1e4d.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-8e112c6b70d20efd74388d7b26053c97e2b11700f8ef5d5b5f9d723770f2e869.css?body=1" data-turbolinks-track="true" />

这意味着application.css正在覆盖我background-color的橙色welcome.scss，我想覆盖它。我已经尝试将require中的application.css指令移到底部和各种各样的东西（我以为我没有正确地写它们）。我把他们搬回了他们刚开始的地方。如何在 welcome.scss之后添加application.css ？

是的，我是Rails noob。：）

Answer 1

以下内容将 application.css 放在顶部：

*= require_self
*= require_tree .

Answer 2

您通常不希望在application.css中包含CSS，而只是将其用于指令。如果你确实包含了CSS，Rails会在所有指令之后包含它，无论你把它放在文件的哪个位置，都会出现问题。

我相信您可以使用指令require_self来覆盖它，并指定包含指令文件中CSS的顺序。您可以查看here以获取更多信息。

如何使用Rails将一个样式表优先于另一个？

2 个答案: