Sudut 7 alih keluar atribut pendua dalam SCSS

Question

Angular SASS (.scss) Sifat jalur. Bagaimanakah saya boleh menghalang perkara ini daripada berlaku supaya saya boleh membenamkan atribut pendua untuk keserasian merentas pelayar?

Untuk menyalin, buat projek Angular 7.2 baharu

{
      "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"
      }
    }

Tambahkan kelas "teststyle" pada mana-mana elemen dalam komponen anda.

<div style="text-align:center" class="teststyle">Hello
</div>
<router-outlet></router-outlet>

Gunakan dalam fail .scss yang sepadan dengan komponen

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

Prapemproses sudut mengalih keluar segala-galanya kecuali atribut pertama dan terakhir. css yang sepadan adalah seperti ini. -webkit-linear-gradient, -o-linear-gradient dan -moz-linear-gradient tidak diterjemahkan fail css/js. Ini adalah isu tarnspilation, bukan isu pelayar.

Saya melihat ini apabila saya menggunakan css langsung dan ia betul.

juga termasuk angular.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"
}

Answer 1

Angular menggunakan Autoprefixer untuk menambah sebarang awalan vendor yang diperlukan dan mengalih keluar yang tidak diingini. Pada asasnya anda tidak perlu risau tentang menambah apa-apa kerana ia akan ditambah untuk anda. Yang dikeluarkan adalah kerana ia tidak diperlukan.

Lihat: https://caniuse.com/?search=linear-gradient Penggunaan dan Sokongan

• -webkit-linear-gradient Hanya perlukan

  • Chrome 4-25 (dikeluarkan 2010-2013) - 0% daripada pelayar dunia
  • Safari 4-6.1 (dikeluarkan pada 2010-2013) - 0.01% daripada pelayar global
  • iOS Safari 3.2-6.1 (dikeluarkan 2010-2013) - 0.01% daripada pelayar global
  • Pelayar Android 2.1-4.3 (dikeluarkan 2009-2013) - 0.13% daripada pelayar global

• -o-linear-gradient Hanya diperlukan untuk Opera 11.5 dan Opera mudah alih 12 (dikeluarkan pada 2011-2012), 0% daripada pelayar global

• -moz-linear-gradient Hanya diperlukan untuk Firefox 3.5-15 (keluaran 2010-2012), 0.01% daripada pelayar

---

Jika anda masih mahu/memerlukan sokongan untuk kecerunan CSS dalam penyemak imbas berusia 0% 10+ tahun dalam versi Angular yang dilancarkan pada 2018, anda hanya boleh menambah src/browserslist fail (Isu berkaitan) Anda boleh ketahui tentangnya di sini Format fail