angle-cliを使ってブートストラップ4をカスタマイズする方法

Question

私は、angle-cli 1.0とBootstrap 4-alpha6を使ってAngular 4アプリケーションを持っています。 ブートストラップ4をカスタマイズします。プライマリボタンの色を変更します。

将来の証明の解決策でなければなりません。つまり、私のカスタマイズは、後でブートストラップをアップグレードしなければならないことを意味します。

私はブートストラップを と統合しました。"bootstrap": "4.0.0-alpha.6",を私のpackage.jsonファイルの依存関係に追加しました。 はさらに、Iは角度-cli.jsonに"apps"に

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

を加えました。

最初に、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が、私はすべての変更が表示されないとき。

私は正しい方向にスタートしましたか？クリーンなアングルCLIワークフローで、ブート・ストラップ・ボタン/スタイルを適切にカスタマイズするにはどうすればよいですか？

あなたがここにソースを見つけることができます：あなたは$body-bg & $body-colorを変更しようとしているhttps://github.com/nemoo/democratizer-angular/tree/ngbootstrap/frontend-angular

Answer 1

値はSASS値ではなく、CSSの値です。

CSSファイルではなくSASSファイルを参照する必要があります。

更新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詳細を読むことができます。