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?

i think your question is icomplete, where is the file component.scss? i did not understand well, what you want to do. — raduken
– raduken, Commented Feb 7, 2017 at 10:46

MADMap · Accepted Answer · 2017-02-18 13:32:37Z

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

edited Feb 18, 2017 at 13:32

answered Feb 18, 2017 at 13:28

MADMap

3,1824 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Günter Zöchbauer Over a year ago

This should only be an issue for styles that need to cross component boundaries, but that's likely with bootstrap though.

MADMap Over a year ago

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

Pete Herc Over a year ago

This worked for me after spending hours trying other things. Thanks

Collectives™ on Stack Overflow

Overwriting styles from Bootstrap in an angular2 component-stylesheet

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related