0

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

Here's my main.scss file:

@charset 'utf-8';

@import 'variables';
@import url('https://fonts.googleapis.com/css?family=Montserrat:500,700');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');
@import 'layouts';

In the variables files, I have:

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

However, these variables are ignored by Bootstrap. What am I doing wrong?

Cody Winton
  • 2,989
  • 5
  • 25
  • 48

2 Answers2

1

But you are importing the css file.

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

pacanga
  • 416
  • 6
  • 17
1

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624