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

[rakeshadak137]

Hello,

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 rupeshv@clistesoft.com", "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 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 :