在 Angular 项目中应用自定义 Bootstrap 变量

Question

我试图在我的 Angular 项目中覆盖 Bootstrap 的默认颜色。我_variables.scss在我的src文件夹中创建了一个文件。

在此文件中，我添加了以下代码： $primary: purple;

然后我将我的_variables.scss文件导入到我的主文件中styles.scss：@import 'variables';

我还安排了我的angular.json文件，使我的样式如下所示：

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

我想实现的是，当我在我的 html 中使用以下代码时：

<button type="submit" class="btn btn-primary auth-button">Sign in</button>

我的按钮的颜色应该是紫色。

我想稍后在几页上更改更多变量，因此这应该是一个全局变量。

Answer 1

我设法通过从将 Bootstrap 添加到我的样式中的位置删除 Bootstrapangular.json并在我的styles.scss.

我还更改了 Bootstrap 路径以定位该scss文件。这是我的 html 代码：

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

这是我的风格angular.json：

"styles": [
              "src/styles.scss"
            ],