Angular CLI 6 : angular.json에서 Sass 컴파일을 어떻게 추가합니까?

Angular CLI 6 : angular.json에서 Sass 컴파일을 어떻게 추가합니까?

---

방금 새 Angular CLI 6.0을 사용하여 새 Angular 프로젝트를 만들었지 만 Sass 컴파일을 프로젝트에 추가해야합니다. 프로젝트를 만들 때 플래그를 설정할 수 있다는 것을 알고 있지만 내 프로젝트는 이미 생성되어 작업이 완료되었습니다.

새로운 각도 CLI 생성됩니다 새 구성 파일이 지금이라고 angular.json하기보다는 angular-cli.json. 파일의 구성표도 새 속성으로 다릅니다.

예전 angular-cli.json에는 stylExt이렇게 설정할 수있는 섹션이 있는데

"defaults": {
    "styleExt": "scss"
}

그러나 "test"및 "lint"속성 뒤에 정확히 어디에 넣어야할지 모르겠습니다 .

Matches multiple schemas when only one must validate.

건물은 다음을 생성합니다.

Schema validation failed with the following errors: Data path "['defaults']" should NOT have additional properties(styleExt).

CLI 문서를 보면 어디에 넣을 것인지를 나타내는 아무것도 보이지 않습니다 "styleExt".

나는 조언 다른 답변을 본 적이 : ng set defaults.styleExt scss발생한다 get/set have been deprecated in favor of the config command..

나는 시도 ng config set defaults.styleExt scss했고 npm config set defaults.styleExt scss전자는 오류를 던지고 후자는 분명히 파일에 영향을 미치지 않지만 오류는 없었습니다.

---

정확히 수행 스모키 도슨 댓글을 달았습니다 ,

"projects": {
  "angular-app": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {
      "@schematics/angular:component": {
        "styleext": "scss"
      }
    },
    "architect": {...}
  }
}

위의 결과입니다. 그래서 앱에 키에서 schematics, 키 추가 @schematics/angular:component키와 styleext로 설정을 scss.

이것은 angular.json프로젝트의 루트 디렉토리에있는 파일에 적용되어야합니다 .

---

Angular 6에서는 그보다 더 쉽습니다. 컴파일은 자동으로 처리됩니다! 어떻게 ? 구성 요소 수준에서 scss 를 사용하려면 확장자가 scss 인 파일의 이름을 지정해야합니다 ( 더 적은 경우에도 styl ). 그리고 component.ts 에서 해당 스타일도 scss로 변경합니다 .

다음은 문서의 스크린 샷입니다.

그리고 전역 스케일 (src / styles.css)에서 Scss를 사용하려면 styles.css를 styles.scss로 변경해야합니다. 그런 다음 angular.json으로 이동하여 이전 styles.css를 새 styles.scss 값으로 변경하십시오. 아래 이미지와 같이 :

여기에 자신을 탐색하려는 사람들을위한 첫 번째 부분에 대한 문서 링크 : https://angular.io/guide/component-styles#non-css-style-files

이제 ng-cli를 설정하면 어떨까요? 새 구성 요소를 생성 할 때 확장은 기본적으로 scss가됩니다. 다음과 같이 ng config명령을 사용하십시오 .

 ng config schematics.@schematics/angular:component.styleext scss

그러면 angular.json이 다음과 같이 업데이트됩니다.

"schematics": {
    "@schematics/angular:component": {
        "styleext": "scss"
    }
} 

이전 angular-cli.json과 동일합니다.

    defaults: {
        "styleext": "scss"
    }

이미 시작되었지만 기본값이 scss로 설정되지 않은 프로젝트를위한 것입니다. 새 프로젝트를 만드는 경우 옵션 --style을 사용하여 다음과 같이 지정합니다.

ng new my-project --style=scss

그리고 angular.json 파일에서 지정된 필드를 업데이트 할 수있는 config 명령 인 선행 명령을 사용할 필요가 없습니다 (이미 설정되어 있기 때문입니다).

참고 URL : https://stackoverflow.com/questions/50165010/how-do-i-add-sass-compilation-in-angular-cli-6-angular-json