web-dev-qa-db-de.com

Wie man Twitter-Bootstrap-Styles in eck2 mit ng2-bootstrap überschreibt

Ich verwende ng2-bootstrap von valor-software. Wenn ich die Website mit ng serv starte, hat die Seite, die bedient wird, die folgenden Stil-Tags in der Kopfzeile:

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

Es zieht eindeutig den zweiten Inline-Style aus der Datei node_modules/bootstrap/dist/css/bootstrap.css ein. Ich möchte die Hintergrundfarbe des Body-Tags überschreiben. Ich kann die Datei bootstrap.css im Ordner node-modules ändern, aber das fühlt sich nicht nach der richtigen Lösung an.

Das Ändern der style.css-Datei bewirkt nichts. Selbst das Ändern der Datei index.html scheint nichts zu tun. Die Stile scheinen überschrieben zu werden.

Jede Hilfe wäre sehr dankbar.

vielen Dank

10
Peter Munnings

Ich habe die Lösung nach einigem Graben gefunden.

In der Datei angle-cli.json befand sich Folgendes:

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

]

Ich musste nur die Reihenfolge der Stile ändern

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

und fügen Sie eventuelle Überschreibungen zur Datei src/styles.css hinzu

20
Peter Munnings

Vielleicht haben sie seit diesem Beitrag im Dezember einige Änderungen an den Updates vorgenommen. Aber ich musste keine Änderungen an meiner Datei angle-cli.json vornehmen, aber der einzige angegebene Stil war der Standardstyles.css, das sich im Stammverzeichnis _ befindet.srcOrdner. Was für mich aber am Ende funktionierte, war das Hinzufügen einiger@import-Anweisungen für meine benutzerdefinierten css-Dateien zur bootstrap.css-Datei und das Sicherstellen, dass das Stylesheet in meiner index.html referenziert wurde. 

Mein Setup ist @ Winkel 2.4.7, Knoten-Sass 4.5, Knoten 6.9.5, Bootstrap 4, NgBootstrap 1.0. 0-alpha

0
BashC

Die neueste Entwicklungsversion von ng2-bootstrap enthält Anweisungen, die ich zur Verwendung von Bootstrap 4 mit @ angle/cli mitgeliefert habe.
Der Hauptteil der Anweisungen sollte immer noch auf Bootstrap 3 anwendbar sein. Wenn Sie SASS verwenden und eine variable.scss-Datei definieren, können Sie die erforderlichen Überschreibungen in dieser Datei platzieren.
Wenn Sie auf diese Weise vorgehen möchten, müssen Sie die SASS-Version von Bootstrap verwenden (das Github-Repository für die SASS-Version enthält auch Details zum Überschreiben von Variablen).

0
websterd

Wenn Sie sass verwenden, sollten Sie dies tun, nachdem Sie bootstrap in Ihre Datei styles.scss importiert haben. Zum Beispiel

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

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