ブートストラップ4フォントサイズを変更するには？

Question

私は十分な情報を得ており、ここで問題を提起したいと考えていました。私は、フォントサイズは、例えば、HTML要素から変更する必要がありますいくつかの場所で読んだことがある：

html { font-size: 14px } 

とブートストラップ4レム値はそれに応じてテキストを更新します。

興味深いことに、html要素のfont-sizeをデフォルトに保ち、ブートストラップ変数を変更してフォントサイズを変更すると、何か間違っていますか？例えば

：

html { font-size: 16px } 

// Changing bootstrap variable to 
$font-size-base: 0.875rem //instead of 1rem 

Answer 1

：

$custom-variable:0.875rem; 

次に、このようにそれを使用する：あなたのcustom.scssファイルで

は次のように行います。私はブートストラップの作者に、それを一度にすべてクリアするという質問をしました。

今すぐ変更する必要があるのは$ font-size-baseで、これはルートフォントサイズを直接変更します。

また、寄稿者から、html要素でfont-sizeを制御せずに、代わりにブートストラップの変数を変更するように指示されました。

REF：https://github.com/twbs/bootstrap/pull/24060

Answer 2

ブートストラップはそれでベースfont-sizeを定義_reboot.scss

body { font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #292b2c; background-color: #fff; } 

としてノートの： -フレームワークの中にデフォルト値を変更することはありませんカスタムCSS/JSファイルを使用して値を変更し、常にファイル。ここ 14px使用この独自の style.css（カスタムCSSファイル）内にフォントサイズを変更するためにそう

body { 
    font-size: 0.875rem; 
} 

はworking fiddle

使用することは、あなたがあなたを見ることができません!importantですデフォルトで変更を上書きするように変更されます。すべての混乱と非常に多くの異なった答えと

@import "./src/scss/_modules/custom"; 
@import "./bower_components/bootstrap/scss/bootstrap"; 

body { 
font-size:$custom-variable; 
}