1

I am using latest Bootstrap 4 beta 2. I am trying to customize it. Mean change variables with my own.

I have my own styles.scss with all bootstrap imports:

// My variables
@import 'helpers/variables';

// Bootstrap files
@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/bootstrap/scss/mixins';
@import 'node_modules/bootstrap/scss/root';
@import 'node_modules/bootstrap/scss/print';
@import 'node_modules/bootstrap/scss/reboot';
// ... all others

Official documentation provides an example, how bootstrap can be customized (themed). But there is only simple example with HEX colors.

But what if I want to override variables in bootstrap _variables.scss and use variables from this file at the same time? For example I want to make my $primary black. They already have this variable inside _variables.scss, but I didn't found an idea how to use it. I've tried like this:

// source: helpers/variables
@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';

$primary: $indigo;

But in this case blue color is used. If I remove these imports from helpers/variables and replace color with HEX - all works fine.

I think that there is no way to do this, because SASS will not allow this, but decided to ask community.

acidernt
  • 2,173
  • 2
  • 19
  • 33

1 Answers1

0

Just create your own variables.scss file and set it to be loaded first in your style.scss and so it will overwrite the default Bootstrap variables.

Then just copy-paste some variables from Bootstrap _variables.scss you want to change into your variables.scss and customize them. Note that you should remove default marks in your variables.scss.

Ryan Cambell
  • 1