Angular minification with css and URL background image only in prod mode

Question

Have an image background with a gradient in css using Angular 6 with the CLI template. In dev mode it works fine, but when I do the prod version (ng build "--prod") the css is getting converted to an invalid syntax.

Here is the scss file:

.home-content {
  .mountain-header {
    margin: 0 auto;
    color: #fff;
    padding: 30px 10px;
    min-height: 110px;
    background: linear-gradient(180deg, rgba(0, 174, 199, .8) 0%, rgba(35,97,146,.8) 100%), url("https://cdnsite/background2.jpg") no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

However when it gets minified, the background property is converted to this:

background: linear-gradient(180deg,rgba(0,174,199,.8) 0,rgba(35,97,146,.8) 100%) center!important/cover!important,url(https://cdnsite/background2.jpg) center!important/cover!important no-repeat!important!important!important

When I take out the url, it seems to work find in prod mode (I get background-size and background-position). Its like it’s merging the 3 properties when I have the Url in the background property.

Answer 1

For some reason, if I remove !important in the background property, it seems to fix the issue...