CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsass
Chud37
Chud37

Reputation: 5007

How is Bootstrap v4 loading _reboot.scss?

I can't figure it out.

I include the bootstrap CDN like so:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

And it loads _grid.scss, _navbar.scss and _reboot.scss. When I inspect that bootstrap.min.css file I dont see any imports or anything like that.

I dont understand how Bootstrap is loading these files? I dont want reboot, it sets global colors that I really dont want.

This is reproduced here:

https://jsfiddle.net/L262w2r0/3/

Upvotes: 16

Views: 28919

Answers (4)

Quentin
Quentin

Reputation: 943585

Presumably, you are looking at the Styles tab of the DOM inspector.

bootstrap.min.css is minified and thus a terrible file to try to examine to figure out how to make changes to the CSS. It is also generated from SASS so, if you did want to edit it, then it would make more sense to edit the source files and recompile the CSS than it would be to edit the CSS directly.

Your browser is using a source map to show which SCSS source file a particular rule came from originally, instead of telling that it is on line 1 of the minified CSS file.

_reboot.scss is not being downloaded by the browser. It is already compiled into bootstrap.min.css.

If you want to remove it, then you will need to get the Bootstrap SASS files and edit them. This probably isn't a good idea (since you then have to maintain your fork of Bootstrap and merge in updates to the main Bootstrap branch if you want bug fixes). A better approach would be to override the rules you don't like.

Upvotes: 23

Shubhi
Shubhi

Reputation: 1

I was also facing same problem, where a style from _reboot.scss was overriding my custom styles even after using !important keyword. I resolved this by just importing the bootstrap css file first and then my style.css, so that my style cascades the bootstrap styles.

Upvotes: 0

Mubarrat Hasan
Mubarrat Hasan

Reputation: 304

Go to the CSS file.
Go to the end.
In the last line, you will see

/*# sourceMappingURL=bootstrap.min.css.map */

If you download it, remove this line and link to your HTML with this CSS, you won't see _grid.scss, _navbar.scss and _reboot.scss in inspect.

This is a fact.

Upvotes: 0

Nil Suria
Nil Suria

Reputation: 574

When you have problems with bootstrap overriding your custom css, you are probably loading bootstrap after your custom css file. Just check the order and make sure that your custom css file loads after bootstrap.

Upvotes: 18

Related Questions