Angular SASS (.scss) Streifeneigenschaften. Wie kann ich verhindern, dass dies passiert, damit ich doppelte Attribute einbetten kann, um die Kompatibilität zwischen Browsern zu gewährleisten?
Zum Kopieren erstellen Sie ein neues Angular 7.2-Projekt
{
"name": "default-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.9",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
Fügen Sie die Klasse „teststyle“ zu jedem Element in Ihrer Komponente hinzu.
<div style="text-align:center" class="teststyle">Hello </div> <router-outlet></router-outlet>
In der der Komponente entsprechenden .scss-Datei anwenden
.teststyle
{
background: #a64bf4;
background: -webkit-linear-gradient(right, #6ab443, #04a95f, #00d421);
background: -o-linear-gradient(right, #6ab443, #04a95f, #00d421);
background: -moz-linear-gradient(right, #6ab443, #04a95f, #00d421);
background: linear-gradient(right, #6ab443, #04a95f, #00d421);
}
Der Angular-Präprozessor entfernt alles außer dem ersten und letzten Attribut. Das entsprechende CSS sieht so aus. -webkit-linear-gradient, -o-linear-gradient und -moz-linear-gradient sind keine übersetzten CSS/JS-Dateien. Hierbei handelt es sich um ein Tarnspilation-Problem, nicht um ein Browserproblem.
Ich habe das gesehen, als ich direktes CSS verwendet habe, und es ist korrekt.
enthält auch angle.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"default-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/default-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "default-app:build"
},
"configurations": {
"production": {
"browserTarget": "default-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "default-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"default-app-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "default-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "default-app:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "default-app"
}
Angular 使用 Autoprefixer 添加任何所需的供应商前缀并删除不需要的前缀。基本上您无需担心添加任何内容，因为它们会为您添加。被删除的那些是因为不需要它们。
查看：https://caniuse.com/?search=linear-gradient 使用和支持
-webkit-linear-gradient仅需要-o-linear-gradient仅 Opera 11.5 和 Opera mobile 12（2011-2012 发布）需要，全球浏览器的比例为 0%-moz-linear-gradient仅 Firefox 3.5-15（2010-2012 发布）需要，占浏览器的 0.01%如果您仍然希望/需要在 2018 年推出的 Angular 版本中使用 0% 使用 10 多年的旧浏览器支持 CSS 渐变，您只需添加一个
src/browserslist文件（ 相关问题）您可以在此处了解该文件格式