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

我得到了各种各样的信息，想在这里提出这个问题。我在一些地方读到，字体大小应该从html元素更改为：

html { font-size: 14px }

html { font-size: 16px }

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

引导4 rem值将相应地更新文本

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

例如：

html { font-size: 14px }

html { font-size: 16px }

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

---

Bootstrap在它的

\u 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文件）中使用此选项

这是你的电话号码

使用
！重要信息
您无法查看更改以覆盖默认更改

在
custom.scss
文件中，执行以下操作：

$custom-variable:0.875rem;

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

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

然后像这样使用它：

$custom-variable:0.875rem;

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

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

所有的困惑和这么多不同的答案。我向bootstrap的作者提出了一个问题，希望能一劳永逸地解决这个问题

现在是crystal，我们需要更改$font size base，这将直接更改根字体大小

他们的贡献者也建议我不要用html元素来控制字体大小，而是改为更改引导变量

参考：

关于仅使用CSS覆盖的注意事项
使用提供的css示例并不适用于引导调整的所有方面

scss的编译结果使用
$font size base
变量来调整许多内容的大小，并可能在将来的更多领域中使用



下拉字体
按钮字体
popover字体
输入组字体
表格字体
重新启动字体

--------------示例SCSS--------------
这是scss文件的一个示例，请注意，在主scss文件中包含引导之前，需要定义
$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";

_变量.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;

我建议您直接更新
html{font-size:16px}
属性，而不是更改引导程序的
$font-size base
，原因如下：

html
的字体大小将直接用于计算最终字体大小。使用“中间体”（即通过Bootstrap的
$font size base
进行调整的
正文）没有任何好处


Bootstrap的SCSS系统使用
$font size base
计算标题大小等，因此所有受Bootstrap影响的CSS规则都将受到影响，包括
正文
（设置为
$font size base$
）。

但是，浏览器计算
rem
中相对于
html{font size}
的CSS字体大小规则，而不是从
$font size base
受影响的元素（如
body
）计算


使用
px
设置
html{font size}
将影响任何
rem
值，包括受引导影响的元素内部和外部，如果这是您想要实现的


相反，如果您只想为受引导影响的元素设置大小，请设置相对于
html{font size}
的
$font size base
，这样引导之外的CSS元素就不会受到影响。但我认为这更像是一个边缘案例，而不是常规案例

注：

如果要设置
$font size base
或任何其他引导变量，则无需修改
variables.scss
文件。在导入
node\u模块/bootstrap/scss/variables
和其他引导文件之前，您应该定义变量，以便使用您的值而不是
！在引导中设置的默认值。优点：无需编辑整个
variables.scss
文件。
是的，我正在使用覆盖，我永远不会更改核心文件中的任何内容…其基本常识。。。但这并不能真正回答我的问题。。。为什么我不能使用override方法更改引导变量中的基值？因此我使用@import导入引导源，然后使用自定义文件修改变量（保持引导文件不变）。是的，在自定义css文件中，您可以在
@import
之后添加此代码以对其进行修改，但是您可以直接添加引导文档中提到的资源。最后，你可以用你的自定义css覆盖默认值；这应该可以吗？如果您更改答案以反映我将接受。我的问题与使用外部文件更改引导变量直接相关。所以本质上我不是在修改引导文件，而是使用_custom.scs来更改引导的基本字体。因此，我将使用0.875rem代替1rem；这样做不会丢失引导的任何功能。如果你说我不应该改变bootstrap的基本字体大小，你能支持你的理论吗？一篇好文章：你可以在这里找到所有变量的列表：$font size base定义了两次，一次在rem中，一次在px中。你推荐哪一种？将
$font size base
更改为像素值而不是rem值甚至不会编译scss样式，我找不到比
html{font size:12px；}更好的支持它的东西看起来，显示类不尊重$字体大小的基础，不幸的是，由于前面的答案，我没有考虑用例的CSS规则不受Bootstrap（IMO是标准）的影响，并且在我认为最实用的方法中添加了重写默认引导变量的建议。（使用NPM/NodeJS工作流的示例）。