0

I'm doing a tutorial to learn Bootstrap 4 (alpha 6). I need to customize the original css configuration from bootstrap.

For this I have modified the _custom.scss:

// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override 
default values
// without modifying source files.
$green:red;

I then recompile the bootstrap.scss file (I'm using prepros) and when I reload the page, nothing has changed. When I look to the generated bootstrap.css file the color is still the default green color from bootstrap main theme.

When I modify the _variables.scss file directly it works perfectly.

In my bootstrap.scss file the _custom.scss file is imported after _variables.scss :

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

Does anyone have a clue on why this isn't working ?

Bastien Giegel
  • 1
  • 2
  • [Bootstrap uses SCSS `!default`s](https://stackoverflow.com/questions/10643107/what-does-default-in-a-css-property-value-mean) to set variables. Try importing `custom` _before_ `variables`. – Blazemonger Jun 12 '17 at 21:59
  • 1
    Can you post your variables document please? – dennispreston Jun 12 '17 at 22:10
  • I 'll update my post this evening. But the variables file is the default provided by bootstrap, I didn't change anything. – Bastien Giegel Jun 13 '17 at 07:14

2 Answers2

0

Ok I found the answer.

It was a misunderstanding of how Sass works. I thought that these variables was like in java : a reference. But it is not the case here in sass so you have to redefine also the components using the color variable like this :

$green:red;

$brand-success:$green;
Bastien Giegel
  • 1
  • 2
0

I had the same issue, my _custom.scss wasn't seems to be working while compiling, but actually its its a very simple fix.

copy _variables.scss content and paste into _custom.scss file and simply remove all !default; from the whole file.

$font-size-h1: 2.5rem !default;

to

$font-size-h1: 2.5rem;

will fix the issue.

Muzammil Hussain
  • 107
  • 1
  • 12