4つの変数を独自の変数でカスタマイズしますか？

Question

私は最新のBootstrap 4 beta 2を使用しています。私はそれをカスタマイズしようとしています。私自身の平均変化変数。

私はすべてのブートストラップ輸入品とのstyles.scss自分を持っている：

// My variables 
@import 'helpers/variables'; 

// Bootstrap files 
@import 'node_modules/bootstrap/scss/functions'; 
@import 'node_modules/bootstrap/scss/variables'; 
@import 'node_modules/bootstrap/scss/mixins'; 
@import 'node_modules/bootstrap/scss/root'; 
@import 'node_modules/bootstrap/scss/print'; 
@import 'node_modules/bootstrap/scss/reboot'; 
// ... all others 

公式文書は（テーマの）カスタマイズすることができますどのようにブートストラップ、exampleを提供します。しかし、HEXカラーの単純な例があります。

しかし、ブートストラップ_variables.scssの変数を上書きして、このファイルの変数を同時に使用したい場合はどうすればよいですか？たとえば、$primaryを黒にしたいとします。彼らはすでに_variables.scssの内部にこの変数を持っていますが、私はそれをどのように使用するか考えませんでした。私はこのように試しました：

// source: helpers/variables 
@import 'node_modules/bootstrap/scss/functions'; 
@import 'node_modules/bootstrap/scss/variables'; 

$primary: $indigo; 

しかし、この場合は青色が使用されます。 helpers/variablesからこれらのインポートを削除し、色をHEXに置き換えると、すべて正常に動作します。

SASSはこれを許可しないため、これを行う方法はないと思いますが、コミュニティに依頼することにしました。

Answer 1

独自のvariables.scssファイルを作成し、最初にstyle.scssにロードするように設定すると、デフォルトのブートストラップ変数が上書きされます。

次に、variables.scssに変更したいBootstrap _variables.scssからいくつかの変数をコピーしてカスタマイズしてください。 variables.scssのデフォルトマークを削除する必要があることに注意してください。