如何使用 angular-cli 自定义 bootstrap 4

Question

我有一个使用 angular-cli 1.0 和 Bootstrap 4-alpha6 的 Angular 4 应用程序。我想自定义 Bootstrap 4. 例如更改主按钮的颜色。

它必须是面向未来的解决方案。这意味着我的定制必须在以后的某个时间点升级 bootstrap。

我通过以下方式整合了 bootstrap：将 "bootstrap": "4.0.0-alpha.6", 添加到我的 package.json 文件中的依赖项。此外，我添加了

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

到 "apps" 在 angular-cli.json.

我的第一个尝试是创建一个名为 style.scss 的新文件，将其放入 src/assets 并在 angular-cli.json.[=18= 中引用它]

内容可能如下所示：

@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

$body-bg:    $gray-dark;
$body-color: $gray-light;

当运行 ng serve 应用程序正常运行时，但我没有看到任何变化。

我的起点是否正确？我如何在干净的 angular-cli 工作流程中通过 sass 正确自定义 bootstrap buttons/styles？

您可以在这里找到来源：https://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular

Answer 1

您尝试更改的值 $body-bg 和 $body-color 是 SASS 值，而不是 CSS 值。

因此您需要引用 SASS 文件而不是 CSS 文件。

将默认样式文件从 styles.css 更新为 styles.scss，并在该文件中...

// set the variables you wish to change
$body-bg:    $gray-dark;
$body-color: $gray-light;
// import in the bootstrap SASS file
@import '../node_modules/bootstrap/scss/bootstrap'

你可以阅读更多here。

如何使用 angular-cli 自定义 bootstrap 4

How to customize bootstrap 4 using angular-cli

twitter

twitter-bootstrap

twitter-bootstrap-4

angular-cli

angular