身体覆盖不通过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"; 

引导被加载OK，我可以在一个索引页我看到它。问题出现在我将代码添加到_base.scss。我增加了以下内容：

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

然后跑到gulp，我可以看到，它生成的CSS文件main.css，为我的索引页使用。我可以在main.css文件的顶部看到主体覆盖，但是当我加载页面时，它并未被应用。我可以在检查元素中看到它正在被进一步向下的引导体定义覆盖。

我做了另一个测试，并设置$font-size-base: 16px;并运行gulp，它应用的变化很好。

如果任何人都可以指出我正确的方向，将非常感激。

Answer 1

正如我所看到的，您有两种选择。

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

1. 您引导后装入你的CSS文件。

2. 在你的css文件中，你添加！重要的是你想重写的任何东西的结尾，就像上面那样。

Answer 2

你可以试试这个

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