css - compass-mixins 插件无法在 Angular2 的浏览器中正确翻译背景图像属性

Question

我正在使用 compass-sass-mixins 版本 0.12.7。我的 Angular 版本是 2.4.3当我构建代码时，我的背景图像属性没有显示在浏览器上。

我的 background-image 属性在我的 global.scss 文件中如下:

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

下面是我的 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"
}

当我使用 ng build 构建代码时，我收到以下警告:

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

当我在 global.scss 中添加上面建议的行而不是原来的行时，警告消失但更改仍然没有反射(reflect)在我的浏览器中。

这个compass-mixins是不是版本问题？

下面是它应该如何显示的截图:

下面是它当前显示的屏幕截图:

无法在此处重现，因为它目前是我的生产构建的一部分。谁能帮忙？

Answer 1

据我所知，compass 不喜欢背景图像速记规则。

它希望使用背景来指定它。

查看如何通过background指定背景图片here.