如何使用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。