未针对 Rails 资源编译 CSS 样式

我在 Rails 3.2 应用程序中对样式表进行了以下设置。我有一个应用程序.css文件中定义了许多样式，以及其他几个用于更具体样式的文件，例如与页脚有关的所有内容都在页脚.css.

在开发中，一切正常，但在生产中，所需文件中的任何移动样式都不会被编译，即上面的所有内容@media only screen and (min-width: 768px)每个样式表的行。

主 application.css 文件定义了大约 700 行样式，之后还有一个@media only screen and (min-width: 768px)其中的媒体查询。媒体查询内部大约有另外 700 行，覆盖了之前的 700 行桌面样式。然而，这些样式已成功编译。我不明白为什么所需的文件不能以同样的方式工作。

应用程序.css

*= require_self
*= require base.css
*= require footer.css

.benefit {
  display: block;
  font-size: 0.8em;
  margin: 1em;
}

@media only screen and (min-width: 768px) {
  .benefit {
    font-size: 1em;
    margin: 3em;
  }
}

# All above styles compile

Base.css

header, section, footer,
aside, nav, article, figure {
    display: block;
}

html, body {
    height: 100%;
    background: #DEDEDE;
}

# Above styles don't compile

@media only screen and (min-width: 768px) {

# Below style does compile

    body {
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    }

}

页脚.css

footer {
    background: #ffffff;
    width: 100%;
}

# Above style doesn't compile

@media only screen and (min-width: 768px) {

# Below style does compile

    footer {
        background: none repeat scroll 0 0 #000;
        color: #818A8A;
        padding: 0;
    }
}

Edit:我尝试在自己的媒体查询中显式添加所需的 css 文件的移动样式，如中所建议的这个答案 https://stackoverflow.com/questions/14766595/bootstrap-ignores-certain-media-queries和下面的代码更新但它不起作用。

页脚.css

@media only screen { 
  footer {
    background: #ffffff;
    width: 100%;
  }
}

# Above style STILL doesn't compile

@media only screen and (min-width: 768px) {

# Below style does compile

    footer {
        background: none repeat scroll 0 0 #000;
        color: #818A8A;
        padding: 0;
    }
}

对于超过 1000 行样式，您肯定会在该行的某处省略分号或大括号。正如建议的d_ethier在评论中，一种测试方法是使用--trace标志，但如果资产是纯 CSS 文件，您的编译将默默失败。

你想做的是包括sass-rails在 Gemfile 中并将样式表重命名为 scss 文件，这样如果有任何错误，它们将导致编译失败并突出显示您的问题。暂时将您的风格从application.css文件到另一个文件（假设是 all.css.scss）：

应用程序.css:

*= require_self
*= require all.css.scss
*= require base.css.scss
*= require footer.css.scss