5

So here is a quote from the Bootstrap docs:

Every Sass variable in Bootstrap 4 includes the !default flag, meaning you can override that default value in your own Sass even after that original variable’s been defined.

Below is my theme.scss file content:

// Bootstrap original
@import "bootstrap/scss/bootstrap";

// Variables overrides
@import "custom-variables";

The content of the custom custom-variables.scss file (to test only):

$body-color: #555;
$font-family-base: serif;

Everything compiles OK, however with no changes to the styles (e.g. the body color and base font family remains the same as it is in the original Bootstrap files. Howe come?

sdvnksv
  • 9,350
  • 18
  • 56
  • 108
  • This question is related: https://stackoverflow.com/questions/45776055/how-to-extend-modify-bootstrap-4/49070142#49070142 – Carol Skelly Mar 02 '18 at 13:37

1 Answers1

8

For v4 alpha. The thing is that you need to override the variables before they get applied to all the boostrap styles (currently you do it afterwards). In bootstrap/scss/bootstrap every scss file gets imported, starting with their variables file. Right after this they provide a kind of hook for you to override the variables before they are used for tables, buttons and so on.

Bootstrap 4 ships with a _custom.scss file for easy overriding of default variables in /scss/_variables.scss. Copy and paste relevant lines from there into the _custom.scss file, modify the values, and recompile your Sass to change our default values. Be sure to remove the !default flag from override values. [Source]

The _custom.scss file should be located inside of your bootstrap/scss/ directory.
Note: this is deprecated since v4 beta.

For v4 beta and above. Variable defaults basically work the other way around. A variable with !default flag will default to the previously set value of this variable (if any available). As all bootstrap variables have this flag, you could import your custom-variables.scss before the bootstrap/scss/bootstrap;

$var: 2px; /* set in custom-variables.scss */
$var: 1px !default; /* set in the bootstrap _variables.scss */

.element {
  width: $var;
}

compiles to

.element {
  width: 2px;
}

A way to use bootstrap variables when overriding them is to import the _variables.scss file twice; once as a single file before you define your overrides and once after as part of whole bootstrap:

// @import bootstrap _variables.scss file
$var: 1px !default;
$var2: 4px !default;

// your custom-variables.scss
$var: 2px + $var2;

// @import bootstrap
$var: 1px !default;
$var2: 4px !default;

.element {
  width: $var;
}

compiles to

.element {
  width: 6px;
}
Marvin
  • 9,164
  • 3
  • 26
  • 44
  • 1
    `_custom.scss` seems to be depricated in v4 beta. I had to import my `cutom-variables.scss` right after `variables.scss` in `bootstrap.scss`. I was hoping to abstrain from modifying the original Bootstrap files, but this seems to be the only solution. – sdvnksv Aug 12 '17 at 15:01
  • 1
    the second option should also work, however this prevents me from using Bootstrap variables for defining other variables (e.g. `$navbar-default-color: $text-muted`). – sdvnksv Aug 12 '17 at 15:12
  • 1
    Valid point. I suggest you create an issue on GitHub as I couldn't find anything there that takes this requirement into consideration. – Marvin Aug 12 '17 at 15:54
  • I'm facing the exact same problem. Is this already addressed to the Bootstrap authors? – JasonK Sep 25 '17 at 09:27
  • 1
    @JasonK I think the easiest (and maybe only way) to overcome the issue is to import the `_variables.scss` before your overrides (and afterwards as part of bootstrap); see my edited answer for an example. This basically brings you back to the concept used in the alpha but you do not have to modify files inside the bootstrap folder. – Marvin Sep 26 '17 at 07:18