Overwriting Styles from Bootstrap in an Angular2 Component-Stylesheet

Overwriting styles from Bootstrap in an angular2 component-stylesheet

I've also posted this question as a possible bug to the angular-cli project and got the hint I needed:

Emulated view encapsulation (the default) emulates the behavior of Shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. If those classes got renamed for this behaviour, it cannot work and I cannot override styles from ie. bootstrap.

If I now set the encapsulation in the component to none, it works and I can override the styles in the component.scss.

@Component({
    selector: 'app-generic-view',
    templateUrl: './generic-view.component.html',
    styleUrls: ['./generic-view.component.scss'],
    encapsulation: ViewEncapsulation.None
})

How to override twitter bootstrap styles in angular2 with ng2-bootstrap

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

Not able to override Bootstrap in Angular 7 app

remove bootstrap.min.css from angular.json.

....
"styles": [
   "node_modules/font-awesome/css/font-awesome.min.css",
   "src/styles/styles.scss",
],
....

import bootstrap.scss file.
```
@import "~bootstrap/scss/bootstrap";
```

set $breadcrumb-divider before @import statements.

$breadcrumb-divider: none;

@import "~bootstrap/scss/bootstrap";
...

Make Angular component stylesheet work with sub-components

I think you may want to look into View Encapsulation.

@Component({
  selector: 'app-no-encapsulation',
  template: `
    <h2>None</h2>
    <div class="none-message">No encapsulation</div>
  `,
  styles: ['h2, .none-message { color: red; }'],
  encapsulation: ViewEncapsulation.None,
})
export class NoEncapsulationComponent { }

These styles will be added to head and will be applicable to other components as well if style rule matches.

Please note, with this you are only enabling this behaviour for just this component. Chances of overlapping CSS rules is still there but is lot less in comparison to directly putting styles in style.css.

I will also suggest that you add .class or #id attribute in mark up to ensure that your rules don't overlap by default.

For example:

.my-component .rule-one {
}

It will ensure that my rules are only applied are on component that has this class applied on it.

Angular 2 & 4 - ng-pick-datetime overwriting component stylesheet

Place your css classes in global styles.css

Overwriting Styles from Bootstrap in an Angular2 Component-Stylesheet