使用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元素中看到它被进一步向下的bodystrap定义覆盖了。

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

如果有人能指出我正确的方向，那将非常感激。

Answer 1

我认为你有两个选择。

{{1}}

1. 在bootstrap之后加载css文件。

2. 在您的css文件中，您将！重要添加到您想要覆盖的任何内容的末尾。

Answer 2

你能试试吗

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