誤った注文でSASSをインポートする

Question

現在SASSに問題があります。 @importステートメントを使用すると、あるファイルを他のファイルの前にインポートしていることを認識していないように見えるので、いくつかのverialが宣言されません。私はBootstrapに簡単な変更を加えようとしています。次のようにフォルダ構造は次のとおりです。

マイapp.scssは、次の通りであるメインエントリポイントです：問題は、変数のファイルである

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Droid+Sans+Mono|Droid+Serif'); //Basic fonts 
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; //Bootstrap 
@import "bower_components/font-awesome/scss/font-awesome"; //Font Awesome 

//Bootstrap style changes 
@import "variables"; 

@import "components/alerts"; 
@import "components/buttons"; 
@import "components/dropdowns"; 
@import "components/forms"; 
@import "components/labels"; 
@import "components/navbars"; 
@import "components/pagination"; 
@import "components/panels"; 
@import "components/progress"; 

がインポートされていませんまたは他のファイルがロードされる前のいずれかになります。これは私が理解できないほど奇妙なことです。

Answer 1

デフォルトのブートストラップ変数を上書きする場合は、ファイルをの前にインポートして、実際のブートストラップ変数の一部をインポートする必要があります。すべての変数に!defaultフラグが設定されているからです。これは、変数がすでに割り当てられている場合、次に割り当てようとしたときに変数を無視することを意味します（最初に変数が割り当てられていない場合を除きます）。例えば

、のは、ブートストラップの_variables.scss部分であることを言わせて：

$brand-primary: #555555 !default;

...あなたは後をインポートする次のファイルで、あなたは$brand-primaryに何かを割り当てることが可能になりますたとえあなたが!defaultフラグを再び指定したとしても無視されます。

これは、を上書きして、ブートストラップがこれを実行する前に行う必要があるためです。

// custom-bootstap.scss contents: 

// Core variables and mixins 
@import "custom/bootstrap/variables"; // custom/overwritten variables 
@import "bootstrap/variables"; 

@import "bootstrap/mixins"; 
... 

とcustom/bootstrap/variables内部

：

`$brand-primary: #000000!default;`