4

我在 Rails 3.2 应用程序中对样式表进行了以下设置。我有一个application.css文件，其中定义了许多样式，还有几个其他文件用于更具体的样式，就像与页脚有关的所有内容都在footer.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;
    }
}

编辑：我尝试按照this answer和下面的代码更新中的建议在他们自己的媒体查询中明确添加所需的css文件的移动样式，但它不起作用。

页脚.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;
    }
}
4

1 回答 1

2

使用超过 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
于 2013-03-10T15:04:17.213 回答