Stylus変数スコープはどのようにファイル間で動作しますか？

Question

理想的には、私はそうのようにサイト全体で使用されるすべての色を定義することができます一つのファイル「colors.styl」を設定したいと思います：

// --------------- GENERAL VARIABLE DEFINITIONS 
$beige  = #F2F2F2 
$darkGrey  = #282828 
$errorRed  = #B94A48 

私は他のファイルにこれらの変数にアクセスしようとすると、私は解決された値の代わりに変数名を取得するだけです。

body { 
    background-color: $beige; 

colors.stylが残りの部分を処理するようにファイルをコンパイルしています。変数がスタイラスのファイル間でスコープを失うのですか？

Answer 1

はい、変数はファイル間でスコープを失います。

しかし、変数にアクセスするには、他のファイルで@import colorを使用できます。代わりに、すべてのファイルに@import "colors"を行うの

Answer 2

、あなたもこのように、メインローダーファイルを作成することができますcolors.stylで定義されて

@import "colors" 

@import "styles1" 
@import "styles2" 

変数は、その後styles1.stylとstyles2.stylで利用できるようになります。スタイラスからの出力は、すべてのスタイルを含む1つの大きなCSSファイルになります。