Angular 9 和 Bootstrap 4 开箱即用的“SassError 未定义变量”

Question

以前我使用 Angular 8 和 Bootstrap 4，并使用这个出色的答案来访问 Bootstrap 变量。 https://stackoverflow.com/a/40070580/1061602.

我似乎无法在 Angular 9 中使用它。

步骤：

1. 使用 Angular CLI 生成一个新项目，选择 SCSS
2. 通过 npm 安装 Bootstrap 4、JQuery、Popper.js

3. 在 styles.scss 中，输入以下内容：
   html { background: $success-bg; }

4. 运行ng b 进行构建

你现在得到SassError: Undefined variable

问：在 SCSS 级别导入 Bootstrap 4 需要什么导入，并且还可以使用变量

我尝试了以下组合：

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

例如

我尝试设置 StackBlitz，但找不到设置 Angular 9、SCSS、Bootstrap 4 的方法，它抱怨的是 CSS 而不是 SCSS。

一般来说，Bootstrap 有效。实用程序类工作。我可以使用混合。我可以毫无问题地重新定义变量。我只是不能以这种方式使用现有的 BS4 变量。

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