ブートストラップ4の変数を別の変数で上書きする方法はありますか？

Question

私はSASSでBootstrap 4を使用していますが、Bootstrapの_variables.scssで定義されている変数を、そのファイルに定義されている別の変数で上書きする方法について質問しています。

ブートストラップのウェブサイトから、私は自分自身のオーバーライドを最初にインポートし、その後にブートストラップSASSファイルをインポートすることを学びました。私は今、ブートストラップの変数ファイルで定義されたライトグレーの変数$gray-200とボディの背景色を上書きしたい私の_overrides.scssで

@import 'modules/_overrides.scss'; 
@import 'vendor/_bootstrap.scss'; 

：だから私はこれをしませんでした。しかし、定義される前に変数にアクセスしようとすると、エラーが発生します。

多くの研究の後で、私は、Bootstrapの_variables.sccsから上書きしたい変数をコピーして、上書きファイルの先頭に置くことによって、この問題を回避する人がいることに気付きました。しかし、変数は複数の場所で定義されているので、これは非常に汚い方法のようです。

私の質問です：別のブートストラップ変数でブートストラップ変数をオーバーライドする方法はありますか？

Answer 1

私は最近、プロジェクトでこの同じジレンマに直面しました。私がこれが少し汚れていることがわかった1つの方法は、私の優先変数とブートストラップの変数の両方を含めた後に変数値を与えることです。

@import 'modules/_overrides.scss'; 
@import 'vendor/_bootstrap.scss'; 

$body-bg: $gray-light; 

あなたは、以前の時点では、ブートストラップの独立した独自の変数を定義し、ブートストラップ変数に新しい値を与えるためにこれらの変数を使用して、もう少しこれをクリーンアップすることができます。

$myOwnGrayColor: #555; 
@import 'modules/_overrides.scss'; 
//In _overrides.scss make something like $body-bg: $myOwnGrayColor; and $gray-light: $myOwnGrayColor; 
@import 'vendor/_bootstrap.scss'; 

変数が定義されるまで参照することはできないため、これは唯一の方法です。