I am currently utilizing the latest Bootstrap 4 beta 2 and attempting to customize it by altering the variables to suit my preferences.
Within my styles.scss file, I have included all necessary bootstrap imports:
// Custom 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';
// ... and so on
The official documentation provides a basic example of how Bootstrap can be themed using HEX colors.
However, what if I want to override Bootstrap's variables like _variables.scss and still utilize the variables from that file? For instance, I want to change my $primary color to black. Even though Bootstrap already has this variable in their _variables.scss, I'm unsure of how to make use of it. I attempted the following approach:
// sourced from helpers/variables
@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';
$primary: $indigo;
Unfortunately, this method resulted in the default blue color being used. If I eliminate these imports from the helpers/variables file and substitute the color with a HEX value, everything works perfectly fine.
My assumption is that achieving this might not be possible due to restrictions imposed by SASS, but I wanted to seek advice within the community.