如何使用angular-cli定制引导程序4

Question

我有一个使用angular-cli 1.0和引导程序4-alpha6的Angular 4应用程序。 我想定制Bootstrap 4.例如改变主要按钮的颜色。

它必须是未来证明的解决方案。这意味着我的定制必须在稍后的时间点存在升级引导。

我已经通过集成bootstrap： 将"bootstrap": "4.0.0-alpha.6",添加到我的package.json文件中的依赖关系。 此外我在角cli.json加入

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

到"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应用comiles不错，但我看不出有什么变化。

我甚至开始正确的方向吗？我将如何通过干净的角度气候工作流程中的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' 

你可以阅读更多here。