Angular 仅在产品模式下使用 css 和 URL 背景图片缩小

Question

使用 Angular 6 和 CLI 模板，在 css 中使用渐变图像背景。在开发模式下它工作正常，但是当我执行产品版本（ng build“--prod”）时，css 被转换为无效语法。

这是 scss 文件：

.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;
}

然而，当它被缩小时，背景属性被转换成这样：

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

当我取出 url 时，它似乎可以在产品模式下找到（我得到背景大小和背景位置）。当我在背景中有 Url 时，它就像合并 3 个属性属性。

Answer 1

出于某种原因，如果我在后台删除 !important 属性，似乎可以解决问题...

Angular 仅在产品模式下使用 css 和 URL 背景图片缩小

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

css

angular

angular-cli-v6