如何使用 angular-cli 自定义引导程序 4答案

【问题标题】：How to customize bootstrap 4 using angular-cli如何使用 angular-cli 自定义引导程序 4
【发布时间】：2023-04-04 15:25:01
【问题描述】：

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

它必须是面向未来的解决方案。这意味着我的自定义必须在以后的引导程序升级中幸存下来。

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

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

到 angular-cli.json 中的"apps"。

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

内容可能如下所示：

@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 正确自定义引导按钮/样式？

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

【问题讨论】：

标签： twitter-bootstrap angular twitter angular-cli twitter-bootstrap-4

【解决方案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。

【讨论】：

注意你现在也可以例如@import '~bootstrap/scss/bootstrap'