How Is Bootstrap V4 Loading _Reboot.Scss

How is Bootstrap v4 loading _reboot.scss?

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.

Bootstrap 4 - Reboot.scss overriding Global.scss

You need to use either specificity or the natural cascade to override the styling from Bootstrap, this is one reason why many people have moved away from these monolithic frameworks as it takes too long to create custom styles when having to overwrite everything from Bootstrap.

For example you could use:

body > div > a {
    text-decoration: none;
}

This might be enough to overwrite the Bootstrap declaration.

Otherwise if you can reorder the styles so your comes after then it may or may not be enough to take precedence in the cascade depending on the specificity of the declaration.

---

Don't use !important, it will lead to many more issues down the line when you need to add further styling to your links and find that the only way is to add further !importants.

---

Check out this for more info on how specificity is calculated:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

bootstrap 4 - When to use reboot css and grid css?

bootstrap.css should contain all the CSS you need to use Bootstrap in your project.

The files bootstrap-reboot.css and bootstrap-grid.css are cut down versions containing just the necessary styles for reboot and Bootstrap's flexbox grid respectively. They are to be used if you don't want to include the entirety of Bootstrap in your project and will only be making use of either of these features.

The docs explain it here: https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

bootstrap and npm - How do I import only the reboot.scss file in my project?

Yep, you are correct.

Check this out: this is the documentation on how to do exactly what you mention.

https://getbootstrap.com/docs/4.0/getting-started/theming/#importing

Is it ok to overwrite Bootstrap V4's preset CSS, which is set by Reboot, with !important?

When you look into the partial /scss/_bootstrap.scss (which pulls together all other partials in the correct sequence) you'll see the following at the top. Meaning that partial /scss/_custom.scss is parsed before partial /scss/_variables.scss. :

// Core variables and mixins
@import "custom";
@import "variables";

If you look into the partial named /scss/_variables.scss you'll see a line :

$body-bg:    #fff !default;

!default equals fall-back in sass/scss. So if no value was assigned to variable $body_bg prior to this specific line, it will be defaulted to #fff. When the variable $body_bg already has a value assigned when this line is encountered, its value will not be reassigned. And the line in /scss/_variables.scss is skipped.

So the proper way to do what you want is to :
1) open the partial named scss/_custom.scss in an editor. Because it's parsed before all other partials (inluding /scss/_variables.scss).
2) copy+paste the line with the variable named $body_bg from the partial scss/_variables.scss into /scss/_custom.scss.
3) Change the value #fff into whatever you want.
4) Remove the word !default (from the line in /scss/_custom.scss).
5) Save /scss/custom.scss and recompile /scss/bootstrap.scss.

You should do it like this with all variables found in /scss/_variables.scss.
EDIT: I meant to say: When you want to make changes to shipped Bootstrap variables (in scss/_variables.scss) you should do it like this. (English is not my native language.)

In the partial /scss/_reboot.scss (parsed after /scss/_variables.scss) the background will be set to whatever is in variable $body_bg. :

body {
  // Make the `body` use the `font-size-root`
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  // Go easy on the eyes and use something other than `#000` for text
  color: $body-color;
  // By default, `<body>` has no `background-color` so we set one as a best practice.
  background-color: $body-bg;
}

When a variable in /scss/_variables.scss doesn't have a !default flag but one is really required, so that it can be overridden from /scss/_custom.scss, then you need to open an issue at the Github repo and discuss/request.

---

Related Topics