'SassError undefined variable' with Angular 9 and Bootstrap 4 out-of-the-box

Question

Previously I have used Angular 8 with Bootstrap 4, and used this excellent answer in order to access Bootstrap variables. https://mcmap.net/q/546513/-accessing-bootstrap-scss-variables-in-angular-2-component.

I cannot seem to get this working with Angular 9.

Steps:

1. Generate a new project with Angular CLI, choosing SCSS
2. Install Bootstrap 4, JQuery, Popper.js via npm

3. In styles.scss, enter the following:
   html { background: $success-bg; }

4. Run ng b to build

You now get SassError: Undefined variable

Q: What import is needed in order to import Bootstrap 4 at SCSS level, AND also be able to use the variables

I have tried combinations of the following:

@import "~bootstrap/scss/bootstrap";

@import "~bootstrap/scss/_variables";

@import "~bootstrap/scss/_variables.scss";

@import "../node_modules/bootstrap/scss/_variables.scss";

@import "../node_modules/bootstrap/scss/variables";

e.g.

I tried setting up a StackBlitz but couldn't find a way of getting Angular 9, SCSS, Bootstrap 4 all set up, it was complaining about CSS instead of SCSS.

Generally speaking, Bootstrap works. The utility classes work. I can use mixins. I can re-define variables with no problem. I just can't use existing BS4 variables in this way.

Engird

Answer 1

You have to import variables before you use, I use the following setup

// Required Bootstrap partials
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

html { background: $success-bg; }

// Optional (Add components according to your use)
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/alert";
@import "node_modules/bootstrap/scss/buttons";

Cambogia

Sorry, this doesn't work for me, I've attached a screenshot showing all the imports I've added – Engird

Answer 2

You may have put a non-existent variable.

Go to your bootstrap's variables file (inside node_modules if you install with npm, or any folder if you download manually), it usually have a name of _variables.scss.

Then find your wanted variable to be reused in your code.

Brandi

that could be a reason for the error, but in this example following the steps the variable $success-bg; exists - or at least it did at the time :) – Engird

Answer 3

It 'might' not be an import issue. I think the 'background' variable isn't actually defined in your './variables/scss' file. You could try opening the file then declaring the variable like this; $background: property_value;

I was working on a bootstrap template I got online, and it gave me a similar error, but with a variable $white that sets the color to white, so I had to define the variable and assign it color white. I hope it helps.

Flurried

this may have been downvoted as it is a similar response to https://mcmap.net/q/1811671/-39-sasserror-undefined-variable-39-with-angular-9-and-bootstrap-4-out-of-the-box. so yes that is the 'genuine reason' for the error message, in this case the variable was defined it was a problem importing the variables file. – Engird