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

How to change the font size with Sass in Bootstrap 4?

提问by webkitfanz

I am getting crisscross information and wanted to raise the issue here. I have read in some places the font size should be changed from the html element for example:

我收到了纵横交错的信息，想在这里提出这个问题。我在某些地方读过应该从 html 元素更改字体大小，例如：

html { font-size: 14px }

And the bootstrap 4 rem values will update the text accordingly.

bootstrap 4 rem 值将相应地更新文本。

Interestingly if I keep the html element's font-size to its default and change the bootstrap variables to change the font size, am I doing something wrong?

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

For example:

例如：

html { font-size: 16px }

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

回答by webkitfanz

With all the confusion and so many different answers. I approached the authors of bootstrap with the question to clear it up once and for all.

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

It is now crystal that we will need to change $font-size-basewhich will directly change the root font-size.

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

I was also advised by their contributor to not control the font-size with html element rather change the bootstrap's variable instead.

他们的贡献者还建议我不要使用 html 元素控制字体大小，而是更改引导程序的变量。

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

参考资料：https: //github.com/twbs/bootstrap/pull/24060

Caution about using just CSS override

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

using the supplied css example will not work for all aspects of bootstrap sizing.

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

The compiled result of scss uses the $font-size-basevariable to size many things and may be used in more areas in the future.

scss 的编译结果使用这个$font-size-base变量来衡量很多东西的大小，以后可能会用到更多的领域。

List of sized elements

大小元素列表

• dropdown font
• button font
• popover font
• input-group font
• forms font
• reboot font

• 下拉字体
• 按钮字体
• 弹出字体
• 输入组字体
• 表格字体
• 重启字体

-------------- Example SCSS --------------

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

This is an example for your scss files, note that you need to define the $font-size-baseBEFORE including bootstrap in your main scss file. In this case, the app.scssfile is the one being compiled.

这是 scss 文件的示例，请注意，您需要$font-size-base在主 scss 文件中定义BEFORE 包括引导程序。在这种情况下，该app.scss文件是正在编译的文件。

app.scss

应用程序.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

_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;

回答by Mr. Pyramid

Bootstrap defines base font-sizein it's _reboot.scssas

引导定义的基础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;
}

NOTE:-Never change default values into frameworks files always modify values using custom css/js files.

注意：-永远不要将默认值更改为框架文件，始终使用自定义 css/js 文件修改值。

so in order to change your font-size to 14pxuse this in your own style.css(custom css file)

所以为了改变你的字体大小以14px在你自己的style.css（自定义css文件）中使用它

body {
    font-size: 0.875rem;
 }

Here is the working fiddle

这是工作小提琴

use !importantyou are not able to see your changes to override your change on default.

使用!important您无法看到您的更改来覆盖默认更改。

In your custom.scssfile do like this:

在你的custom.scss文件中这样做：

$custom-variable:0.875rem;

Then use it like this:

然后像这样使用它：

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

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