CSS 规则在 Angular 8 中转译后被省略
CSS rules getting omitted after transpiling in Angular 8
我将我的应用程序从 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"
}
]
}
}
}
}
}
}
实际CSS规则在CellContainer.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，但没有任何效果。如何确保所有规则都存在于转译代码中。
Angular CLI 使用 Autoprefixer 为特定于浏览器的 CSS 规则添加前缀。
使用 browserslist can be found in the official Angular documentation 设置规则集的指南：
You can tell Autoprefixer what browsers to target by adding a browserslist property to the package configuration file, package.json:
所以只需将您想要支持的浏览器的规格添加到您的 package.json，例如：
"browserslist": [
"> 1%",
"last 2 versions"
]
您可以从 CSS 代码库中删除手动供应商前缀，Autoprefixer 将在构建过程中处理。
请注意，如果您在 CSS 代码库中保留供应商前缀，Autoprefixer 将在编译期间删除这些前缀
浏览器列表中指定的浏览器。
可以找到 browserslist 支持值的完整列表 here。
我将我的应用程序从 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"
}
]
}
}
}
}
}
}
实际CSS规则在CellContainer.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，但没有任何效果。如何确保所有规则都存在于转译代码中。
Angular CLI 使用 Autoprefixer 为特定于浏览器的 CSS 规则添加前缀。
使用 browserslist can be found in the official Angular documentation 设置规则集的指南：
You can tell Autoprefixer what browsers to target by adding a browserslist property to the package configuration file, package.json:
所以只需将您想要支持的浏览器的规格添加到您的 package.json，例如：
"browserslist": [
"> 1%",
"last 2 versions"
]
您可以从 CSS 代码库中删除手动供应商前缀，Autoprefixer 将在构建过程中处理。
请注意，如果您在 CSS 代码库中保留供应商前缀，Autoprefixer 将在编译期间删除这些前缀 浏览器列表中指定的浏览器。
可以找到 browserslist 支持值的完整列表 here。