Question

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

它必须是一个面向未来的解决方案。这意味着我的自定义必须能够在以后的某个时间点升级引导程序。

我已经集成了bootstrap：将"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

Answer 1

您尝试更改的值$body-bg＆amp; $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

1 个答案: