4

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

編集：この回答と以下のコード更新で提案されているように、必要なcssファイルのモバイルスタイルを独自のメディアクエリに明示的に追加しようとしましたが、機能しませんでした。

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

1 に答える 1

2

1000行を超えるスタイリングでは、行のどこかでセミコロンまたは中括弧を省略しているはずです。コメントでd_ethierが示唆しているように、テストする1つの方法は--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
于 2013-03-10T15:04:17.213 に答える