如何使用 Rails 使一个样式表优先于另一个样式表?
How do I give one stylesheet precedence over the other with Rails?
我找遍了所有地方,但我想不出如何让一个样式表优先于另一个样式表。这就是我在 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;
}
我希望我可以用 welcome.scss
输出的内容覆盖 application.css
的 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
正在覆盖 welcome.scss
中的橙色 background-color
,我想覆盖它。我试过将 application.css
中的 require
指令移到底部和各种东西(我以为我没有正确编写它们)。我已经将它们移回了它们最初所在的位置。如何在 application.css
之后包含 welcome.scss
?
是的,我是一个 Rails 菜鸟。 :)
您通常不希望在 application.css
中包含 CSS,而是仅将其用于指令。如果你在那里包含 CSS,Rails 将在所有指令之后包含它,无论你将它放在文件中的什么位置,因此你的问题。
我相信您可以使用指令 require_self
来覆盖它并指定包含指令文件中的 CSS 的顺序。您可以查看 here 了解更多信息。
以下内容会将 application.css 置于顶部:
*= require_self
*= require_tree .
我找遍了所有地方,但我想不出如何让一个样式表优先于另一个样式表。这就是我在 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;
}
我希望我可以用 welcome.scss
输出的内容覆盖 application.css
的 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
正在覆盖 welcome.scss
中的橙色 background-color
,我想覆盖它。我试过将 application.css
中的 require
指令移到底部和各种东西(我以为我没有正确编写它们)。我已经将它们移回了它们最初所在的位置。如何在 application.css
之后包含 welcome.scss
?
是的,我是一个 Rails 菜鸟。 :)
您通常不希望在 application.css
中包含 CSS,而是仅将其用于指令。如果你在那里包含 CSS,Rails 将在所有指令之后包含它,无论你将它放在文件中的什么位置,因此你的问题。
我相信您可以使用指令 require_self
来覆盖它并指定包含指令文件中的 CSS 的顺序。您可以查看 here 了解更多信息。
以下内容会将 application.css 置于顶部:
*= require_self
*= require_tree .