没有为Rails资产编译CSS样式 [英] CSS styles not being compiled for Rails assets

问题描述

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

在开发中，一切正常，但是在生产中，没有编译所需文件中的任何移动样式，即，所有在 @media only屏幕和每行(min-width:768px)上方的所有内容样式表.

主application.css文件定义了约700行样式，此后还具有 @media only屏幕和(最小宽度:768px)媒体查询.在媒体查询中，大约有700行替代了台式机的700行样式.但是，这些样式已成功编译.我不明白为什么所需的文件不能以相同的方式工作.

application.css

  * = require_self* =需要base.css* =需要footer.css.益处 {显示:块；字号:0.8em；保证金:1em;}@仅限纯媒体屏幕和(最小宽度:768像素){.益处 {字号:1em；保证金:3em;}}#以上所有样式均可编译 

Base.css

 页眉，部分，页脚，除了，导航，文章，人物{显示:块；}html，正文{高度:100％;背景:#DEDEDE；}#以上样式无法编译@仅限纯媒体屏幕和(最小宽度:768像素){#下面的样式确实可以编译身体 {文本阴影:1px 1px 1px rgba(0，0，0，0.2);}} 

footer.css

 页脚{背景:#ffffff;宽度:100％;}#以上样式无法编译@仅限纯媒体屏幕和(最小宽度:768像素){#下面的样式确实可以编译页脚{背景:无重复滚动0 0#000；颜色:#818A8A;填充:0;}} 

我尝试按照此答案，并且代码在下面进行了更新，但无效.

footer.css

  @media only屏幕{页脚{背景:#ffffff;宽度:100％;}}#以上样式STILL无法编译@仅限纯媒体屏幕和(最小宽度:768像素){#下面的样式确实可以编译页脚{背景:无重复滚动0 0#000；颜色:#818A8A;填充:0;}} 

解决方案

具有超过1000行样式，您一定会忽略沿行中的分号或花括号.正如 d_ethier 在评论中所建议的那样，一种测试方法是使用-trace 标志进行编译，但是如果资产是纯CSS文件，则编译将以静默方式失败./p>

您要执行的操作是在Gemfile中包含 sass-rails 并将样式表重命名为scss文件，这样，如果出现任何错误，它们将导致编译失败并突出显示您的问题.暂时将样式也从 application.css 文件移动到另一个文件(比如all.css.scss):

application.css :

  * = require_self* =需要all.css.scss* =需要base.css.scss* =需要footer.css.scss 

I have the following setup with my stylesheets in a Rails 3.2 application. I have an application.css file with many styles defined in them, and several other files for more specific styles, like everything to do with the footer is in footer.css.

In development, everything works, but in production, none of the mobile styles in the required files are compiled i.e. everything above the @media only screen and (min-width: 768px) line for each of the stylesheets.

The main application.css file has about 700 lines of styles defined, after which it also has a @media only screen and (min-width: 768px) media query in it. Inside the media query is about another 700 lines overriding the previous 700 lines of styles, for desktops. These styles, however, are successfully compiled. I don't understand why the required files don't work the same way.

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

Edit: I tried explicitly adding the required css files' mobile styles in their own media queries as was suggested in this answer and the code update below but it didn't work.

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

解决方案

With over 1000 lines of styling, you're bound to have omitted a semi-colon or curly brace somewhere along the line. As suggested by d_ethier in the comments, one way to test is to compile with the --trace flag but your compilation will fail silently if the assets are plain CSS files.

What you want to do is include sass-rails in your Gemfile and rename your stylesheets to scss files so that if there are any errors, they'll cause the compilation to fail and will highlight your problem. Temporarily move your styles from your application.css file to another file (let's say all.css.scss) as well:

application.css:

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

这篇关于没有为Rails资产编译CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！