在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

我设法通过从在angular.json中将Bootstrap添加到样式中的地方删除了Bootstrap，并手动将其导入styles.scss中来解决了该问题。

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

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

这是我在angular.json中的样式：

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

Answer 2

您正尝试使用bootstrap-sass功能，但要使用缩小的CSS。

您将需要：

1. 使用bootstrap-sass

   @import './_variables.scss';
   @import '~bootstrap-sass/assets/stylesheets/_bootstrap';
   

2. 用您的主题编译您自己的引导程序版本，并使用缩小的版本。
3. 如果您使用的是bootstrap 4，则可以改用CSS变量

Answer 3

您可以在btn-primary中使用引导类styles.scss进行更改，同时使用import的{​​{1}}在顶部导入变量

_variables.scss