在 Angular 8 中转译后 CSS 规则被忽略

Question

我将我的应用程序从 Angular 2 升级到了 Angular 8。我注意到在转换代码后忽略了一些 CSS 规则。下面是我的 package.json、tsconfig.json 和 angular.json

package.json

{
  "name": "xxx-webapp",
  "version": "1.0.0",
  "license": "ISC",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --base-href ./ --deploy-url /Content/Angular/Deploy/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "8.2.7",
    "@angular/common": "8.2.7",
    "@angular/compiler": "8.2.7",
    "@angular/core": "8.2.7",
    "@angular/forms": "8.2.7",
    "@angular/platform-browser": "8.2.7",
    "@angular/platform-browser-dynamic": "8.2.7",
    "@angular/router": "8.2.7",
    "@ngui/datetime-picker": "0.16.2",
    "angular-linky": "1.2.2",
    "angular-resizable-element": "^3.2.4",
    "angular2-color-picker": "1.3.1",
    "angular2-draggable": "^1.0.7",
    "bootstrap": "^4.3.1",
    "hammerjs": "^2.0.8",
    "justified-layout": "^3.0.0",
    "ng-lazyload-image": "^6.1.0",
    "ng2-file-upload": "1.2.0",
    "ngx-carousel": "1.3.5",
    "ngx-toastr": "^11.0.0",
    "rxjs": "6.5.3",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.5",
    "@angular/cli": "^8.3.5",
    "@angular/compiler-cli": "8.2.7",
    "@angular/upgrade": "8.2.7",
    "@types/core-js": "^0.9.43",
    "typescript": "3.5.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "./Deploy/",
    "importHelpers": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2019",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

angular.json

{
  "DigitalJuice-WebApp": {
    "root": "",
    "sourceRoot": "Process/TypeScripts",
    "projectType": "application",
    "prefix": "",
    "schematics": {},
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "Deploy/",
          "index": "",
          "main": "Process/TypeScripts/main.ts",
          "polyfills": "Process/TypeScripts/polyfills.ts",
          "tsConfig": "Process/TypeScripts/tsconfig.app.json",
          "assets": [],
          "styles": [
            "Development/css/StoreNew/Store.css",
            "Development/css/StoreNew/CellContainer.css"
          ],
          "scripts": []
        },
        "configurations": {
          "production": {
            "fileReplacements": [
              {
                "replace": "Process/TypeScripts/environments/environment.ts",
                "with": "Process/TypeScripts/environments/environment.prod.ts"
              }
            ],
            "optimization": true,
            "outputHashing": "none",
            "sourceMap": false,
            "extractCss": true,
            "namedChunks": false,
            "aot": false,
            "extractLicenses": true,
            "vendorChunk": true,
            "buildOptimizer": false,
            "budgets": [
              {
                "type": "initial",
                "maximumWarning": "2mb",
                "maximumError": "5mb"
              }
            ]
          }
        }
      }
    }
  }
}

CellContainer.css中实际的CSS规则是这样的（包含在angular.json的样式中）：

.StandardCellOutline {
      box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.5);
      background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0), rgb(20, 23, 32), rgb(34, 39, 54)), -webkit-linear-gradient(left, rgb(44, 46, 51), rgb(140, 147, 168), rgb(44, 46, 51));
      background-image: -moz-linear-gradient( bottom, #000000, #141720, #222736), -moz-linear-gradient(left center, #2C2E33, #8C93A8, #2C2E33);
      background-image: -ms-linear-gradient(bottom, #000000, #141720, #222736), -ms-linear-gradient(left, #2C2E33, #8C93A8, #2C2E33);
      background-clip: content-box, padding-box;
      padding: 1px;
  }

  .StandardCellOutline:hover {
      box-shadow: 0px 0px 12px 1px rgba(001, 122, 204, 0.9);
      background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0), rgb(20, 23, 32), rgb(34, 39, 54)), -webkit-linear-gradient(left, #4674CD, #4674CD, #4674CD);
      background-image: -moz-linear-gradient( bottom, #000000, #141720, #222736), -moz-linear-gradient(left center, #4674CD, #4674CD, #4674CD);
      background-image: -ms-linear-gradient(bottom, #000000, #141720, #222736), -ms-linear-gradient(left, #4674CD, #4674CD, #4674CD);
  }

但是转译代码后，变成了：

.StandardCellOutline {
      box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.5);
      background-image: -ms-linear-gradient(bottom, #000000, #141720, #222736), -ms-linear-gradient(left, #2C2E33, #8C93A8, #2C2E33);
      background-clip: content-box, padding-box;
      padding: 1px;
  }

  .StandardCellOutline:hover {
      box-shadow: 0px 0px 12px 1px rgba(001, 122, 204, 0.9);
      background-image: -ms-linear-gradient(bottom, #000000, #141720, #222736), -ms-linear-gradient(left, #4674CD, #4674CD, #4674CD);
  }

您可以看到 Chrome 和 Firefox 的规则已被删除。如果我只是更改顺序，并将 chrome 的规则放在最后，那么该规则将保留。所以问题是只包含最后一条规则，其余的都被删除了。

.StandardCellOutline {
          box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.5);
          background-image: -moz-linear-gradient( bottom, #000000, #141720, #222736), -moz-linear-gradient(left center, #2C2E33, #8C93A8, #2C2E33);
          background-image: -ms-linear-gradient(bottom, #000000, #141720, #222736), -ms-linear-gradient(left, #2C2E33, #8C93A8, #2C2E33);
          background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0), rgb(20, 23, 32), rgb(34, 39, 54)), -webkit-linear-gradient(left, rgb(44, 46, 51), rgb(140, 147, 168), rgb(44, 46, 51));
          background-clip: content-box, padding-box;
          padding: 1px;
      }

变成

.StandardCellOutline {
          box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.5);
          background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0), rgb(20, 23, 32), rgb(34, 39, 54)), -webkit-linear-gradient(left, rgb(44, 46, 51), rgb(140, 147, 168), rgb(44, 46, 51));
          background-clip: content-box, padding-box;
          padding: 1px;
      }

我尝试将 tsconfig 中的目标模块更改为 es2015，但没有任何效果。如何确保所有规则都存在于转译代码中。

Answer 1

Angular CLI 使用 Autoprefixer 作为浏览器特定 CSS 规则的前缀。

使用browserslist 设置规则集的指南可以在official Angular documentation 中找到：

您可以通过将 browserslist 属性添加到包配置文件 package.json 中来告诉 Autoprefixer 要定位哪些浏览器：

因此，只需将您要支持的浏览器规范添加到您的package.json，例如：

"browserslist": [
  "> 1%",
  "last 2 versions"
]

您可以从 CSS 代码库中删除手动供应商前缀，Autoprefixer 会在构建过程中处理这些问题。

请注意，如果您在 CSS 代码库中保留供应商前缀，Autoprefixer 将在编译期间将其删除（如果它们不是必需的） browserslist 中指定的浏览器。

可以在 here 找到完整的 browserslist 支持值列表。