繰り返しブートストラップ輸入

Question

その下に私のapplication.cssとcommon.cssにコードされています私の資産構造のスクリーンショット：

#app/assets/stylesheets/application.css.scss 
*= require_self 
*= require ./store/_common 
*= require font-awesome 



#app/assets/stylesheets/store/_common.css.scss 
// import the CSS framework 
@import "bootstrap-sprockets"; 
@import "bootstrap-custom"; 
@import "footer"; 
@import "header"; 
.. 
.. 

問題は、私はすでに私のcommon.cssでのブートストラップファイルがまだ私はここで私がしたい、手動ですべてのファイルでそれらをインポートする必要が輸入したにも関わらず、ということですブートストラップ変数またはミックスインを使用してください。例えば_footer.css.scssに私は.thumbnailクラスを変数$gray-lighterを使用するか、または拡張しようとするとすぐ、私は「ブートストラップ・変数・カスタム」@import行を追加するとエラー

Undefined variable: "$gray-lighter". 

を取得しています。このファイルの上に、エラーは消え去る。

common.cssから最初の二つの輸入を除去しながら、私は、次のようにapplication.cssを変更しようとしたが、それはうまくいきませんでした：

*= require_self 
*= require _bootstrap-sprockets 
*= require _bootstrap-custom 
*= require store/_common 
*= require font-awesome 

UPDATE： - 私の現在の構造があります以下のように、common.cssに含まれているすべてのファイルにbootstrap-customを含める必要はありませんが、taxons_show.cssのような他のファイルには必要です。私は、このブートストラップ・カスタムインポートがapplication.cssに移行しようとしたが、それはうまくいきませんでした：私はつもりはプロジェクトの例の組織を置くよ

Rails.application.config.assets.precompile += %w(dashboard/* dashboard.css dashboard.js store/taxons*) 

#app/assets/stylesheets/application.css.scss 
*= require_self 
*= require ./store/_common 
*= require font-awesome 


#app/assets/stylesheets/store/_common.css.scss 
// import the CSS framework 
@import "bootstrap-custom"; 
@import "footer"; 
@import "header"; 
..... 
.... 


#app/assets/stylesheets/store/taxons_show.css.scss 
@import "bootstrap-custom"; 

#product-listings { 
    padding: 30px; 
    display: flex; 
    flex-wrap: wrap; 
    .product_card { 
    margin-bottom: 50px; 
    border: none; 
    @extend .thumbnail; 
    h3 { 
     color: $gray; 
     margin-top: 10px; 
     font-size: 1.5em; 
    } 
    .price { 
     color: $gray; 
     font-size: 1.7em; 
    } 
    } 
} 

Answer 1

こんにちはをして、私はすべての変更をしなかった理由を説明してみてください作られた、また、私はつもり

#app/assets/stylesheets/application.scss 
/* 
*= require_self 
*/ 
@import "bootstrap-custom"; 
@import "font-awesome"; 
@import "store/common"; 

最初のレールは今...ちょうどSCSS延長を受け入れるあなたはレールの最後のバージョンに取り組んでいることを、いくつかの変更は、以前のバージョンでは動作しない可能性がありますと仮定し、そうするよ、同じことコーヒーのために、私たちはこの表記法を使うつもりです。重要です。なぜなら、私たちは必要なものの代わりに輸入を使う必要があるからです。これらのファイルをCSSに事前にレンダリングする必要があることがわかります。例えば、変数ファイルを使用して別のブートストラップファイルが必要な場合は、内部的に変数のcssコンパイルとブートストラップファイルのcssコンパイルがあります。それらはコミュニケーションを持っていると思われますが、 "_"でファイル名をあらかじめ指定しておくとファイルの一部であることを知っているはずですので理論的にはそれらをscssファイルとしてインポートしてからコンパイルすることができますこれに問題があり、ちょうど私はサブファイルからファイルを呼び出すことができることを意味する1 lvlからそれを行うことができるようにする、あなたは私に従っていますか？その位置では、ブートストラップが非常に大きく、何度も私が今使っている別のライブラリを上書きするためです。

次の私たちのブートストラップ・カスタムファイル

@import "bootstrap-sprockets"; 
@import "bootstrap/bootstrap-variables"; 
@import "bootstrap"; 

//for example 
html{ 
    //need it for sticky footer 
    position: relative; 
    min-height: 100%; 
    body{ 
     padding-top: $navbar-height + 30px; 
     padding-bottom: 350px; 
    } 
} 

オクラホマは、スプロケットは、常に最初に来た、すべての基本的な依存関係で、その後、私は個人的に、ブートストラップ・変数のコピーを持っていると限り私のカスタマイズを変更したいです私はここから来ることができます。これらの多くは連動していますので、あなたがここからやるならば多くの変更があります。また、もっと明確であると思います。そして、私は以下のscssコードとして必要な変更をしてください。変数の変更は次のインポート "bootstrap"と一緒に働くことを覚えておいてください。これは|| = assignmentsと似ています。つまり、デフォルト値を取る前に値が与えられていなければ、

通常、ブートストラップの問題は、同じファイルの複数のインポート、またはファイル間の相互作用を生成しないscssのプリコンパイル済み部分のインポートです。魔法のファイルはscssでなければならず、魔法のものはCSS（一般にプリコンパイルされたライブラリ）。

は最後に

Rails.application.config.assets.precompile += %w() 

あなたは* = require_selfを使用しているのでので、この場所は、アプリケーションファイルの外に住んでいるファイルのためのものですが、あなたは、あなたは常に他のファイルを使用することができ、再びインポートする必要はありませんそれはまた別の歴史ですので、あなたのファイルが正しく構成されている場合* .PNG、しかし、レールはあなたが魔女を正確にあなたが必要なファイルを知らせなければならないなどPNG、GIF、フォントなどのファイル、またはthosesの一般化を追加する必要があり、あなたがしている場合あまりにも多く見えて、そこにおそらくエラーがあります。

基本的な英語については申し訳ありませんとは、このことができますことをよろしくお願いいたします！