4

Rails 3 アプリ、bootstrap-sassおよびアセット パイプラインを使用しており、アセット パイプラインの問題をデバッグする方法についていくつかのアイデアを探しています。

開発中、オンザフライでコンパイル (つまり、コンパイルされた多数の css ファイルからインクルード) すると、アプリは期待どおりに見えます。

ただし、アセット パイプラインを使用してアセットを 1 つのファイルにコンパイルし、運用環境での動作をテストする場合、連結ファイルの検証エラーapplication.cssが原因でブラウザーが css を正しく評価しなくなっていると思います。表示の問題。

開発中に生成された css ファイルを確認し、それらを css3 バリデーターに渡すと、ベンダーの css ファイルを操作しているときに検証エラーが発生することがわかります (ほとんどの場合、これらはベンダー固有のハッキングが原因であり、バリデーターが作動しません)。 - 生成したファイルは、w3c バリデーターで実行したときに検証に合格しています。以下のスプロケット ファイルに合格/不合格の結果をリストしました。

/*
 * sprocket file in application.css
 *
 *= require_self
 *= require vendor
 *= require bootstrap-include # FAILS 474 ERRORS - presumably down to css hacks
 *= require DT_bootstrap      # FAILS TWO ERRORS - presumably down to css hacks again
 *= require navbar            # PASSES
 *= require footer            # PASSES
 *= require main              # PASSES
 *= require home              # PASSES
 *= require widget            # PASSES
 *= require search            # PASSES
 *= require devise            # PASSES
 *= require doohickeys        # PASSES
 *= require datepicker        # FAILS - again yet more cross browser css hacks suspected
*/

連結によってアプリのビジュアルがこのように壊れてしまう場合、本番用のファイルの準備をどのように開始すればよいでしょうか?

このようにコンパイルされたスタイルシートをデバッグする最善の方法のアイデアを得るためにここに尋ねています-以前にエレガントに解決されたもののように聞こえますが、このような問題に対処するときの信頼できるアプローチを知りません.

たとえば、Firefox や Webkit の Web 開発者インスペクター ツールを使用しても、一部のルールが評価されていないことがわかりますが、コンパイルされた CSS で面倒なバイナリ検索を実行する以外に、それ以上の方法は明らかではありません。

で一部のファイルのみをコンパイルし、事前にコンパイルされたファイルに個別にapplication.cssリンクするなど、このような状況で使用できるより特殊なツールがすでにいくつかあるはずです。bootstrap-sass

4

1 に答える 1

3

bootstrap-sass などを使用している場合は、Sprocket ディレクティブを使用しないでください。使用する必要があります@import。

マニフェスト ファイルの名前を から に変更application.cssしapplication.css.scss、次に変更@importします。例:

@import "frameworks";
@import "bootstrap-responsive";
于 2012-04-11T13:39:26.893 に答える