Rails：如何将背景颜色应用于正文答案

【问题标题】：Rails: How to apply background-color to bodyRails：如何将背景颜色应用于正文
【发布时间】：2016-09-29 12:04:56
【问题描述】：

虽然我想在我的 rails 应用程序中为 body 应用背景颜色，但它不起作用。

应用程序.css

body {
  background-color: red;
}

application.html.erb

<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
  <%= render 'layouts/header' %>
  ...

如果您能给我任何建议，我们将不胜感激，尽管这是一个显而易见的问题。

已解决

我在 application.css 中更改了require 的顺序。

之前

 *= require_tree .
 *= require_self
...
 *= require bootstrap
 *= require bootstrap-datetimepicker

之后

 *= require bootstrap
 *= require bootstrap-datetimepicker
...
 *= require_tree .
 *= require_self

【问题讨论】：

请只尝试“背景：红色”
CSS 是否正在加载？
感谢您的评论，@anujsof。尽管我尝试了background: red;，但它不起作用。
感谢您的评论，@Ronak Jain。是的，CSS 已加载。当我尝试添加诸如.title { font-size: 10px;} 时，它可以工作。
在 Chrome 中，右键单击页面上的任意位置并选择“检查”。请在线查找更多说明。

标签： html css ruby-on-rails ruby-on-rails-4

【解决方案1】：

我认为您的问题是 CSS 加载不正确。确保您的 CSS 正在加载。在 chrome 中右键单击您的页面，然后转到“元素检查”。然后在右侧菜单中，您可以检查您的 CSS 是否已加载，它可能不会。有关检查器的更多信息，请在此处查看：https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/?hl=en

接下来，在您的 application.css 中，您应该能够找到 rails 加载您的 css 文件的结构和顺序。寻找类似的东西，并确保首先提到“重置”，然后在底部某处提到您的自定义。

    *= require reset
    *= require flexboxgrid
    ...
    *= require custom

最后一次加载自定义 css 文件后（在 application.css 文件的底部），您可以在 custom.css 文件中添加：

   body {
      background: red;
    }

【讨论】：

谢谢你的回答，@Thomas C。当我检查element inspect 时，我发现引导程序被覆盖了 application.css。所以我在application.css中重新排列了require的顺序，然后就可以了。我在问题底部添加了当前设置。

【解决方案2】：

你可以试试这个：

body {
  background: red;
}

这对你有用。

使用背景而不是背景颜色。此外，为了获得最佳实践，请尝试以 scss 格式而不是 css 写下样式

【讨论】：

感谢您的回答，@Dheer。虽然我在custom.css.scss中尝试了相同的代码，但结果是一样的。
您是否检查过没有其他覆盖 css ？如果是，那么试试 body { background: red !important; }
感谢您的评论，@Dheer。当我尝试{ background: red !important; } 时它可以工作。但是当我尝试在 application.css 中更改 require 的序列时它也有效。
Cool @SamuraiBlue ，这意味着由于顺序错误而导致样式覆盖。