没有为Rails资产编译CSS样式

2023年1月3日 192次阅读

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

在开发中,一切都有效,但在生产中,所需文件中的所有移动样式都没有被编译,即每个样式表的@media only屏幕和(min-width：768px)行以上的所有样式.

主application.css文件定义了大约700行样式,之后它还有一个@media only屏幕和(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;
    }
}

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

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

最佳答案 拥有超过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
点赞