9

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?

MADMap
  • 3,132
  • 3
  • 25
  • 31

1 Answers1

14

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
})
MADMap
  • 3,132
  • 3
  • 25
  • 31
  • This should only be an issue for styles that need to cross component boundaries, but that's likely with bootstrap though. – Günter Zöchbauer Feb 18 '17 at 13:32
  • Yes, with other styles I never had issues, only with styles from external sources like bootstrap. And as mentioned: if I override the style in the central style.scss it also works fine: only did not work from the component.scss – MADMap Feb 18 '17 at 13:37
  • This worked for me after spending hours trying other things. Thanks – Pete Herc Jul 02 '18 at 13:52