web-dev-qa-db-ja.com

Bootstrap 4のSassでフォントサイズを変更する方法

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

html { font-size: 14px }

そして、bootstrap 4 rem値は、それに応じてテキストを更新します。

興味深いことに、html要素のfont-sizeをデフォルトのままにして、bootstrap変数を変更してフォントサイズを変更すると、何か間違っているのでしょうか？

例えば：

html { font-size: 16px }

// Changing bootstrap variable to 
$font-size-base: 0.875rem //instead of 1rem
csstwitter-bootstrapsassbootstrap-4
22
webkitfanz

すべての混乱と非常に多くの異なる答え。私はbootstrapの作者たちに、それをきっぱりと解決するための質問でアプローチしました。

これで、ルートフォントサイズを直接変更する$ font-size-baseを変更する必要があるようになりました。

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

参照： https://github.com/twbs/bootstrap/pull/2406

CSSオーバーライドのみの使用に関する注意

提供されているcssの例を使用しても、bootstrapのサイジングのすべての面で機能するとは限りません。

Scssのコンパイル結果は、$font-size-base変数を使用して多くのものをサイズ変更し、将来さらに多くの領域で使用される可能性があります。

サイズの要素のリスト

  • ドロップダウンフォント
  • ボタンのフォント
  • ポップオーバーフォント
  • 入力グループのフォント
  • フォームフォント
  • 再起動フォント

-------------- SCSSの例--------------

これはscssファイルの例です。メインscssファイルにbootstrapを含む前に$font-size-baseを定義する必要があることに注意してください。この場合、app.scssファイルがコンパイルされます。

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables -- this is where you defined the variables 
//              BEFORE importing bootstrap which will use it's  
//              defaults if the variable is not predefined.
@import "variables";
// Bootstrap
@import '~bootstrap/scss/bootstrap';
// DataTables https://datatables.net/download/npm#DataTables-core
// @import "datatables";
@import "datatables.min";

_variables.scss

// Body
$body-bg: #ffffff;

// Typography
$font-size-base: 12px; // this changes the font-size throughout bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
28
webkitfanz

ブートストラップは、ベース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を使用すると、デフォルトで変更を上書きする変更を確認できません。

custom.scssファイルで次のようにします。

$custom-variable:0.875rem;

次に、次のように使用します。

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

body {
font-size:$custom-variable;
}
3
Mr. Pyramid