Overwriting styles from Bootstrap in an angular2 component-stylesheet

Question

I have an angular2 application build with angular-cli containing several components. Each component has a referenced stylsheed (scss).

Unique styles from those stylesheets are correctly applied to the component-template.

What I cannot do is overwrite styles from external css's which are included in the angular-cli from those component-stylesheets.

As soon as I move the style to the central styles.scss it works.

My angular-cli.json looks like this:

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css",
    "../node_modules/bootstrap-timepicker/css/bootstrap-timepicker.css",
    "styles.scss"
  ],

Any Ideas how I can overwrite the bootstrap-css in the component.scss?

Answer 1

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