Bootstrap Customization SASS Variables Override Not Working

Question

Trying to customize Bootstrap as documented here: https://getbootstrap.com/docs/4.0/getting-started/options/

Here\'s my main.scss file:

@cha         


        

Answer 1

But you are importing the css file.

Just download the sass source, import it and then you can edit bootstrap variables.

Answer 2

You need to import the bootstrap/ scss after any variables that are changed to override the default variables..

@import url('https://fonts.googleapis.com/css?family=Montserrat:500,700');

$font-family-base: 'Montserrat', sans-serif; 
$body-color: red;

@import 'bootstrap';

https://www.codeply.com/go/ZIRPuQ7E3x

Also see: How to extend/modify (customize) Bootstrap 4 with SASS