正文覆盖未通过 sass 覆盖应用 Bootstrap

Question

我正在使用 Gulp 和 Boostrap 组合主题。我有 main.scss 文件，其中包含以下代码：

@import 'base/_base.scss';
@import 'base/_mixins.scss';
@import 'base/_variables.scss';
@import 'layouts/_footer.scss';
@import 'layouts/_header.scss';
@import 'layouts/_nav.scss';
@import 'modules/_typography.scss';
@import 'modules/_blocks.scss';
@import 'modules/_buttons.scss';
@import 'modules/_sections.scss';
@import 'modules/_components.scss';
@import "bootstrap";
@import "bootstrap/theme";

Bootstrap 正在正常加载，因为我可以在我的索引页中看到它。问题是当我将代码添加到例如_base.scss。我添加了以下内容：

body {
 font-size: 16px;
 line-height: 1.5em;
 color: #666666;
}

然后是运行 gulp，我可以看到它为我生成了一个 css main.css 文件，索引页面正在使用该文件。我可以在 main.css 文件的顶部看到正文覆盖，但是当我加载页面时它没有被应用。我可以在 inspect element 中看到它被 bootstrap body 的定义覆盖了。

我做了另一个测试并设置了 $font-size-base: 16px; 和运行 gulp 并且应用了这个更改。

如果有人能指出我正确的方向，将不胜感激。

Answer 1

据我所知，您有 2 个选择。

body 
{
 font-size: 16px !important;
 line-height: 1.5em  !important;
 color: #666666 !important;
}

您在 bootstrap 之后加载 css 文件。
在您的 css 文件中，您将 !important 添加到您想要覆盖的任何内容的末尾，如上所示。

Answer 2

你能试试这个吗

html body {
 font-size: 16px;
 line-height: 1.5em;
 color: #666666;
}

正文覆盖未通过 sass 覆盖应用 Bootstrap

body override not being applied via sass override with Bootstrap

css

sass

twitter-bootstrap

gulp