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

Question

我得到了十字交叉的信息,并想在这里提出这个问题.我在某些地方读过应该从html元素更改字体大小,例如:

html { font-size: 14px }

并且bootstrap 4 rem值将相应地更新文本.

有趣的是,如果我将html元素的font-size保持为默认值并更改引导变量以更改字体大小,我是否做错了什么？

例如:

html { font-size: 16px }

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

Answer 1

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

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

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

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

关于仅使用CSS覆盖的注意事项

使用提供的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;