Jak zastąpić style bootstrap dla Twittera w angular2 za pomocą ng2-bootstrap

Question

Używam ng2-bootstrap z oprogramowania walorowego. Kiedy uruchomić stronę internetową za pomocą ng służyć, strona, która jest serwowane posiada następujące znaczniki stylów w nagłówku:

<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} 

Wyraźnie pociągnięcie drugiego stylu inline w od node_modules/bootstrap/dist/CSS/plik bootstrap.css. Chcę zastąpić kolor tła na znaczniku body. Mogę zmienić plik bootstrap.css w folderze node-modules, ale to nie jest właściwe rozwiązanie.

Zmiana pliku style.css nie powoduje żadnych zmian. Nawet zmiana pliku index.html nic nie da. Style wydają się być przesłonięte.

Każda pomoc będzie najbardziej ceniona.

dziękuję

Answer 1

Znalazłem rozwiązanie po pewnym kopaniu.

W kątowe-cli.json plik był następujący:

"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" 
    } 
} 

]

ja po prostu potrzebne, aby przełączyć kolejność stylów

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

i dodać wszelkie przesłonięcia do pliku src/styles.css

Answer 2

Może zmienili pewne rzeczy w aktualizacjach od tego posta w grudniu. Ale nie trzeba wprowadzać żadnych zmian w moim pliku kątowe-cli.json, ale zwrócić uwagę na styl tylko wymienione tam był domyślnym styles.css to w korzeniu src folderu. Ale w końcu dla mnie działało dodanie instrukcji do moich niestandardowych plików css do pliku bootstrap.css i upewnienie się, że arkusz stylów został odwołany w moim pliku index.html.

Moja konfiguracja jest @angular 2.4.7, node-Sass 4,5, węzeł 6.9.5, bootstrap 4, ngBootstrap 1.0.0-alpha

Answer 3

Najnowsze wydanie rozwój NG2-bootstrap zawiera instrukcje, które dostarczyłem na temat używania bootstrap 4 z @ angle/cli.
Główna część instrukcji powinna nadal mieć zastosowanie do bootstrap 3 bez większych problemów. Najważniejszym punktem zainteresowania jest to, że jeśli używasz SASS i definiujesz plik variable.scss, to wszystkie żądane przesłonięcia mogą zostać umieszczone w tym pliku.
Jeśli chcesz iść tą drogą, będziesz musiał użyć wersji bootstrap SASS (repozytorium github dla wersji SASS również pokazuje szczegóły, jak nadpisać zmienne).

Answer 4

Jeśli używasz Sass, która radzę należy zrobić, to można umieścić przesłonięcia po zaimportowaniu bootstrap w styles.scss pliku.Na przykład:

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

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