CODEWITHSUNDEEP
cssangularwebpack
Jonathan Eckman
Jonathan Eckman

Reputation: 2077

Angular 2 CSS order of precedence not respected

On my layout page, in the <head>, I have the following styles:

<link rel="stylesheet" href="/dist/vendor.css">
<style>
    .bg-dark {
        background-color: #240000; 
    }
</style>

I have added the link to my layout page. The style block is added dynamically by Angular & webpack. From what I know about CSS, that last .bg-dark class should win over any .bg-dark class declared in `vendor.css. Yet I see the following:

Incorrect order of precedence

Is this something caused by the magical pre-rendering of Angular? Is there some way to prevent this?

Upvotes: 1

Views: 699

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73721

The background-color attribute in vendor.css has the !important flag, which elevates its priority:

background-color: #222222 !important;

To override that setting, you should set the !important flag in your layout page CSS:

<style>
    .bg-dark {
        background-color: #240000 !important; 
    }
</style>

or remove that flag in vendor.css, if your can.

Upvotes: 5

Related Questions