css - 如何使用 Rails 赋予一个样式表优先于另一个样式表?

标签 css ruby-on-rails sass sprockets

我找遍了所有地方,但我想不出如何让一个样式表优先于另一个样式表。这是我在 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 的文件,用于我的 Controller ,其名称为 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 放在顶部:

*= require_self
*= require_tree .

关于css - 如何使用 Rails 赋予一个样式表优先于另一个样式表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30132948/

相关文章:

sass - SASS可以合并属性吗?

css - SCSS/SASS 中带有 Angular 分量的全局变量

html - 是否可以只使用 div 类来分隔常用样式,而不使用表格?

javascript - React元素中的鼠标滚轮/滚动事件没有溢出(图片缩放)

ruby-on-rails - 如何在heroku上克隆项目

ruby-on-rails - 使用 Sublime Text 2 的 RubyTest

ruby-on-rails - html5网络音频api在服务器上应用过滤器后保存输出

css - 当对导入的文件进行更改时,Gulp-sass 中断

javascript - Chrome 扩展...从 JS 执行 CSS?

javascript - Angular与样式表双向绑定(bind)的解决方案