'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. /sf/answers/2804940631/.

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.

Answer 1

使用前必须导入变量，我使用以下设置

// 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";