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

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"
      ],

到"apps"在角cli.json.

我的第一个尝试是创建一个名为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应用程序时,comiles正常,但我没有看到任何更改.

我是否开始朝着正确的方向前进？如何在干净的angular-cli工作流程中通过sass正确地自定义引导按钮/样式？

你可以在这里找到源: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'

你可以在这里阅读更多.