web-dev-qa-db-fra.com

Comment remplacer les styles de démarrage Twitter dans angular2 avec ng2-bootstrap

J'utilise ng2-bootstrap de valor-software. Lorsque je lance le site Web avec ng serve, la page servie comporte les balises de style suivantes dans l'en-tête:

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

Il extrait clairement le deuxième style en ligne du fichier node_modules/bootstrap/dist/css/bootstrap.css. Je veux remplacer la couleur de fond de la balise body. Je peux modifier le fichier bootstrap.css dans le dossier node-modules, mais cela ne semble pas être la bonne solution.

Changer le fichier style.css ne fait rien. Même changer le fichier index.html ne semble rien faire. Les styles semblent être remplacés.

Toute aide serait appréciée.

merci

cssangularng2-bootstrap
10
Peter Munnings

J'ai trouvé la solution après quelques recherches.

Dans le fichier angular-cli.json était le suivant:

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

],

Je devais juste changer l'ordre des styles

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

et ajoutez tous les remplacements au fichier src/styles.css

20
Peter Munnings

Peut-être ont-ils changé certaines choses dans les mises à jour depuis cet article en décembre. Mais je n'ai pas eu à apporter de modifications à mon fichier angular-cli.json, mais le seul style répertorié ici était celui par défautstyles.cssqui se trouve à la racinesrcdossier. Mais ce qui a fini par fonctionner pour moi a été d’ajouter simplement quelques déclarations@importpour mes fichiers CSS personnalisés au fichier bootstrap.css et de s’assurer que la feuille de style était référencée dans mon index.html. 

Ma configuration est @ Angular 2.4.7, Noeud-sass 4.5, Noeud 6.9.5, Bootstrap 4, NgBootstrap 1.0.0-alpha

0
BashC

La dernière version de développement de ng2-bootstrap contient les instructions fournies sur l’utilisation de bootstrap 4 avec @ angular/cli.
La partie principale des instructions devrait toujours être applicable à bootstrap 3 sans trop de peine. Le principal point d’intérêt pour vous est que, si vous utilisez SASS et définissez un fichier variable.scss, toutes les remplacements nécessaires peuvent être placés dans ce fichier.
Si vous voulez utiliser cette méthode, vous devrez utiliser la version SASS de bootstrap (le référentiel github de la version SASS donne également des détails sur la manière de remplacer les variables).

0
websterd

Si vous utilisez sass, ce que je vous conseille de faire, vous pouvez alors placer vos substitutions après avoir importé bootstrap dans votre fichier styles.scss . Par exemple

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

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