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

user_1061602 0
Viewed 4571

Previously I have used Angular 8 with Bootstrap 4, and used this excellent answer in order to access Bootstrap variables. https://stackoverflow.com/a/40070580/1061602.

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

enter image description here

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. enter image description here

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.

bootstrap-4 twitter-bootstrap angular sass
2 Answers

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.

user_141808190

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";
user_31485570
Related