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/

Inca

i.imgur.com/rFulXYF.png — I can't reproduce the behaviour. – Frazer

Strange. If I remove the link rel the stylesheets go. I can't work out where they are coming from. – Inca

@Frazer jsfiddle.net/L262w2r0/1 inspect the link, see it's coloured by _reboot.scss – Inca

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

Frazer

How is that possible though? There is no mention of _reboot.scss in that CSS file, There is some technology here I am not aware of. And I thought .scss files could not be rendered by the browser. – Inca

"There is no mention of _reboot.scss in that CSS file" — I said Your browser is using a source map – Frazer

"And I thought .scss files could not be rendered by the browser" — I said _reboot.scss is not being downloaded by the browser. It is already compiled into bootstrap.min.css – Frazer

Ah. Okay. So CSS Source Mapping is something I have not come across before. Thank you, I will research it! – Inca

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.

Bamboozle

I did it with django admin templates, and your recommendation worked like a charm, I had to override the base.html and import the css and js. Therefore, the changes were not too dramatic like before, just little fixes with 2 lines of css in another css file. – Resuscitate

Its worth checking this out. It fixed my issues. – Scharaga

Answer 3

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.

Hoar

Answer 4

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.

Usquebaugh