如何在Bootstrap4中使用Sass更改字体大小？

所有的困惑和许多不同的答案.我找到了bootstrap的作者,问题是一劳永逸地清理它.

它现在是水晶,我们将需要更改$ font-size-base,这将直接改变根字体大小.

我也被他们的贡献者建议不要用html元素控制font-size而是改为改造bootstrap的变量.

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

使用提供的css示例不适用于bootstrap大小调整的所有方面.

scss的编译结果使用$font-size-base变量来调整很多东西,并且可能在将来的更多区域中使用.

大小元素列表

下拉字体

按钮字体

popover字体

输入组字体

表格字体

重启字体

--------------示例SCSS --------------

这是scss文件的一个示例,请注意您需要$font-size-base在主scss文件中定义BEFORE包括引导程序.在这种情况下,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;