ソースを編集せずにbootstrap4変数を変更する

Question

_custom.scssファイルを編集してブートストラップを再コンパイルする必要があることを示唆する記事をいくつか見てきました。しかし、私はnpm経由でbootstrap4をインストールしています。したがって、node_modules内のブートストラップの内容を変更することは、非常に悪い習慣です。

具体的には、Angular4アプリを開発し、Angular CLIを使用しています。

Answer 1

はい、ブートストラップファイルには触れないでください。また、CSSレベルで変数をオーバーライドしないでください。余分なコードが作成されます。また、ブラウザに余分な作業をさせることになります。

Sassレベルの変数を上書きして、ブートストラップの変数がSassからCSSに変換されるように、2つのルールが競合せず、いずれのロードにも束縛されないようにします順序または特異性の戦争。

ブートストラップ変数を無効にする最も簡単な方法は、独自のscssファイルを作成して、main.scssと呼ぶことです。次にここからカスタム変数ファイルvariables.scssを呼び出し、次にブートストラップコアを呼び出します。したがって、main.scssファイルは次のようになります。

@import "path-to-npm/bootstrap"; 
@import "path-to-your-repo/variables"; 

そして、Bootstrapの善良な人たちは常に変数にデフォルトフラグを使用するとは限らないので、これらのファイルの順序は重要です。したがって、variables.scssを最後に呼び出す必要があり、このようなものが含まれている可能性があります。

@dropdown-bg: hotpink; 

その後、サス、タスクを見て、あなたのmain.scssファイルへの変更を監視すると同時に、あなたの変数とブートストラップライブラリを変換すると、1つのCSSファイルにで設定することができます。