ng2-bootstrapでangular2のtwitterブートストラップスタイルを無効にする方法

Question

私はvalor-softwareのng2-bootstrapを使用しています。私はサーブNG使用してウェブサイトを起動すると、アップサービスされるページは、ヘッダー内の次のスタイルタグを持っています

<style type="text/css">/* You can add global styles to this file, and also import other style files */ 
</style> 

<style type="text/css">/*! 
* Bootstrap v3.3.7 (http://getbootstrap.com) 
* Copyright 2011-2016 Twitter, Inc. 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
*//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0} 

それははっきりnode_modules /ストラップ/ distの/ CSSから第二のインラインスタイルを引っ張っています/ bootstrap.cssファイル。 bodyタグの背景色を無効にしたい。私はnode-modulesフォルダ内のbootstrap.cssファイルを変更できますが、それは適切な解決策のようには感じません。

style.cssファイルを変更しても何も起こりません。 index.htmlファイルを変更するだけでも何もしないようです。スタイルはオーバーライドされているように見えます。

ご協力いただければ幸いです。

おかげ

Answer 1

は、私はいくつかの掘削後に解決策を見つけました。 角度-cli.jsonファイルで

は以下の通りであった：

"apps": [ 
{ 
    "root": "src", 
    "outDir": "dist", 
    "assets": [ 
    "assets", 
    "favicon.ico" 
    ], 
    "index": "index.html", 
    "main": "main.ts", 
    "test": "test.ts", 
    "tsconfig": "tsconfig.json", 
    "prefix": "app", 
    "mobile": false, 
    "styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
    ], 
    "scripts": [], 
    "environments": { 
    "source": "environments/environment.ts", 
    "dev": "environments/environment.ts", 
    "prod": "environments/environment.prod.ts" 
    } 
} 

]を、

私はちょうど

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

スタイルの順序を切り替え、追加する必要

src/styles.cssファイルのオーバーライド

Answer 2

彼らは12月のこの記事以降の更新でいくつかのことを変えたのかもしれない。しかし、私はルートSRCフォルダ内のデフォルトStyles.cssをがあった私のアンギュラcli.jsonファイルを変更する必要はありませんでしたが、記載されているだけのスタイルに注意すること。しかし、私のために働いていたのは、自分のカスタムCSSファイルのために、@importステートメントをbootstrap.cssファイルに追加し、スタイルシートがindex.htmlで参照されていることを確認することでした。

マイセットアップが ノード-SASS 4.5、 ノード6.9.5、 ブートストラップ4、 ngBootstrap 1.0.0-α

Answer 3

NG2-ブートストラップの最新の開発リリースが含まれ、 @angular 2.4.7ですブートストラップ4を@ angular/cliと一緒に使用する方法について私が提供した指示。
命令の主要部分は、あまりにも多くの問題を起こすことなく、ブートストラップ3にも適用可能です。 SASSを使用してvariable.scssファイルを定義すると、必要なオーバーライドをそのファイルに入れることができます。
このようにするには、SASSバージョンのブートストラップを使用する必要があります（SASSバージョンのgithubリポジトリにも、変数を上書きする方法の詳細が示されています）。

Answer 4

あなたは私はあなたが何をすべき助言SASSを、使用している場合は、あなたのstyles.scssファイルにブートストラップインポートした後、あなたはあなたの上書きを配置することができます。たとえば、

// version 4 
@import 'variables'; 
@import '~bootstrap/scss/bootstrap'; 

// START bootstrap override 
.card { 
    margin-bottom: 0.5rem; 
} 
.card-body { 
    padding: 1rem; 
}