compass-mixins plugin not translating background-image property correctly in browser in Angular2

I am using compass-sass-mixins version 0.12.7. My angular version is 2.4.3 My background-image property is not geetting displayed on browser when I build the code.

My background-image property is as follows in my global.scss file:

    body{
  background-color: rgba(44,22,78,1);
  @include filter-gradient($clr-purple, $clr-orange, vertical);
  @include background-image(linear-gradient(top, rgba(44,22,78,1) 0%, rgba(164,64,131,1) 50%, rgba(164,64,131,1) 50%, rgba(255,126,90,1) 100%));
  font-family: $font-regular;
  letter-spacing: 0.7px/$base-font-size+rem;
}

Below is my package.json :

{
"name": "rockethire",
"version": "1.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "npm run clean && tsc src/main.ts",
"build_prod": "npm run build",
"lint": "tslint "src/**/*.ts"",
"test": "ng test",
"clean": "rm -rf dist",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@ angular/common": "2.4.3",
"@ angular/compiler": "2.4.3",
"@ angular/core": "2.4.3",
"@ angular/forms": "2.4.3",
"@ angular/http": "2.4.3",
"@ angular/material": "2.0.0-beta.1",
"@ angular/platform-browser": "2.4.3",
"@ angular/platform-browser-dynamic": "2.4.3",
"@ angular/router": "3.4.3",
"ag-grid": "^15.0.0",
"ag-grid-angular": "^15.0.0",
"angular-messages": "^1.6.2",
"angular2-cookie": "^1.2.6",
"angular2-material-datepicker": "^0.5.0",
"angular2-perfect-scrollbar": "^2.0.3",
"compass-sass-mixins": "^0.12.7",
"core-js": "^2.4.1",
"moment": "^2.17.1",
"ng2-auto-complete": "^0.10.9",
"ng2-pdf-viewer": "^0.1.6",
"ng2-pop-over": "^0.9.34",
"ng2-validation": "^4.2.0",
"bootstrap": "^3.3.7",
"rxjs": "^5.0.1",
"tinymce": "^4.7.4",
"ts-helpers": "^1.1.1",
"underscore": "^1.8.3",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@ angular/compiler-cli": "2.4.3",
"@ types/jasmine": "2.5.38",
"@ types/node": "^6.0.42",
"@ types/underscore": "^1.8.6",
"angular-cli": "1.0.0-beta.24",
"angular2-perfect-scrollbar": "^2.0.2",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "~2.0.3"
},
"description": "This project was generated with angular-cli version 1.0.0-beta.24.",
"repository": {
"type": "git",
"url": "git+https://github.com/clistesoft/rockethire.git"
},
"author": "Rupesh [email protected]",
"bugs": {
"url": "https://github.com/clistesoft/rockethire/issues"
},
"homepage": "https://github.com/clistesoft/rockethire#readme"
}

When I build the code using ng build, I get following WARNING :

PIE does not support background-image. Use @include background(linear-gradient(top, #2c164e 0%, #a44083 50%, #a44083 50%, #ff7e5a 100%)) instead.
Backtrace:
    node_modules/compass-sass-mixins/lib/compass/css3/_images.sass:48, in mixin `background-image`
    src/_global.scss:18

When I add above suggested line instead of the orginal one in global.scss, the WARNING goes away but still the change is not reflected in my browser.

Is this compass-mixins a version problem?

Below is the screenshots how it shoud display :

And below is the screenshot how it is currently displaying :

Can not reproduce here as its currently a part of my production build. Can anyone help?

Solution

I fixed this issue using the general CSS syntax. I added

background-image: -webkit-linear-gradient(top,#2c164e,#a44083 50%,#a44083 0,#ff7e5a);

instead of

@include background-image(linear-gradient(top, rgba(44,22,78,1) 0%, rgba(164,64,131,1) 50%, rgba(164,64,131,1) 50%, rgba(255,126,90,1) 100%));

in my global.scss file