How is Bootstrap v4 loading _reboot.scss?

Question

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/

Answer 1

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 then 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 marge 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.

Answer 2

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.