如何使用 ng2-bootstrap 覆盖 angular2 中的 twitter bootstrap 样式

Question

I am using ng2-bootstrap from valor-software. When I start the website using ng serve, the page that is served up has the following style tags in the header:

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

It is clearly pulling the second inline style in from the node_modules/bootstrap/dist/css/bootstrap.css file. I want to override the background-color on the body tag. I can change the bootstrap.css file in the node-modules folder, but that doesn't feel like the right solution.

Changing the style.css file doesn't do anything. Even changing the index.html file doesn't seem to do anything. The styles appear to be overridden.

Any help would be most appreciated.

thanks

Answer 1

I found the solution after some digging.

In the angular-cli.json file was the following:

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

],

I just needed to switch the order of the styles

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

and add any overrides to the src/styles.css file

Answer 2

If you are using sass, which I advise you should do, then you can place your overrides after you import bootstrap in your styles.scss file. For example

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

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

Answer 3

Maybe they changed some things in the updates since this post in December. But I didn't have to make any changes to my angular-cli.json file, but to note the only style listed there was the default styles.css that's in the root src folder. But what ended up working for me was just adding some @import statements for my custom css files to the bootstrap.css file and making sure that the stylesheet was referenced in my index.html.

My setup is @angular 2.4.7, node-sass 4.5, node 6.9.5, bootstrap 4, ngBootstrap 1.0.0-alpha

Answer 4

The latest development release of ng2-bootstrap includes instructions I supplied on how to use bootstrap 4 with @angular/cli.
The main part of the instructions should still be applicable to bootstrap 3 without too much trouble. The main point of interest for you is that if you use SASS and define a variable.scss file then any overrides you require can be placed in that file.
If you do want to go this way you will have to use the SASS version of bootstrap (the github repository for the SASS version also shows details of how to override variables).

Answer 5

Check bottom of src/styles.sass file for bootstrap import like this:

/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap'

Moving this line to the beginning of the file fixed my problem.