Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 911
Adam Marshall Avatar asked Nov 16 '22 14:11

Adam Marshall


1 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.

like image 154
Muhaimin Taib Avatar answered Dec 27 '22 08:12

Muhaimin Taib