Angular 7은 SCSS에서 중복 속성을 제거합니다.

Question

Angular SASS(.scss) 스트립 속성. 브라우저 간 호환성을 위해 중복 속성을 포함할 수 있도록 이런 일이 발생하지 않도록 하려면 어떻게 해야 합니까?

복사하려면 새 Angular 7.2 프로젝트를 만드세요

으아아아

구성 요소의 모든 요소에 "teststyle" 클래스를 추가하세요.

으아아아

컴포넌트에 해당하는 .scss 파일에 적용

으아아아

Angular 전처리기는 첫 번째 속성과 마지막 속성을 제외한 모든 것을 제거합니다. 해당 CSS는 다음과 같습니다. -webkit-linear-gradient, -o-linear-gradient 및 -moz-linear-gradient는 CSS/js 파일로 번역되지 않습니다. 이는 브라우저 문제가 아닌 tarnpilation 문제입니다.

직접 CSS를 사용해서 본 내용이 맞네요.

angular.json도 포함됩니다

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

Answer 1

Angular는 Autoprefixer를 사용하여 필요한 공급업체 접두사를 추가하고 원하지 않는 접두사를 제거합니다. 기본적으로 아무것도 추가되지 않으므로 걱정할 필요가 없습니다. 제거된 것은 필요하지 않았기 때문입니다.

보기: https://caniuse.com/?search=linear-gradient 사용 및 지원

• -webkit-linear-gradient 딱 필요해요

  • Chrome 4-25(2010-2013년 출시) - 전 세계 브라우저 중 0%
  • Safari 4-6.1(2010-2013년 출시) - 전 세계 브라우저의 0.01%
  • iOS Safari 3.2-6.1(2010-2013년 출시) - 전 세계 브라우저의 0.01%
  • Android 브라우저 2.1-4.3(2009-2013년 출시) - 전 세계 브라우저의 0.13%

• -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 파일을 추가하면 됩니다(관련 문제). 이에 대해 여기에서 알아볼 수 있습니다. 파일 형식