Question

我在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行样式，用于桌面。但是，这些样式已成功编译。我不明白为什么所需文件的工作方式不一样。

application.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);
    }

}

footer.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和{2}中建议的代码更新中明确地在他们自己的媒体查询中添加所需的css文件的移动样式，但它不起作用。< / p>

footer.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;
    }
}

Answer 1

超过1000行造型，您必须在沿线的某处省略分号或大括号。正如注释中 d_ethier 所建议的那样，测试的一种方法是使用--trace标志进行编译，但如果资产是纯CSS文件，则编译将无提示失败。

您要做的是在Gemfile中包含sass-rails并将样式表重命名为scss文件，以便在出现任何错误时，它们会导致编译失败并突出显示您的问题。暂时将您的样式从application.css文件移动到另一个文件（让我们说all.css.scss）：

<强> application.css ：

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

没有为Rails资产编译CSS样式

1 个答案: