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

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

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

이제 새 Angular 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에서는 그보다 더 쉽습니다.컴필레이션은 자동으로 처리됩니다.어떻게요?구성 요소 수준에서 sscs를 사용하려면 확장자 sscs로 파일 이름을 지정해야 합니다(같은 방법으로 less, style).그리고 component.ts에서 해당 스타일도 scss로 변경합니다.

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

그리고 전역 스케일(src/styles.css)에서 Scss를 사용하려면 styles.css를 styles.scss로 변경해야 합니다(적어도 마찬가지로, styl... 등).그런 다음 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"
    }

이는 이미 시작되었지만 sscs로 기본 설정되지 않은 프로젝트에 대한 것입니다.를는우을다새다enf우새는e를nautew--style다음과 같이 명시합니다.

ng new my-project --style=scss

그리고 angular.json 파일에서 지정된 필드를 업데이트할 수 있는 config 명령인 preadced 명령을 사용하지 않아도 됩니다(이미 설정되어 있기 때문입니다).

현재 버전 9.0.6에서는 조금 다릅니다.위의 Dico와 Smokey Dawson에 따르면, 당신은 당신의 각.json에 다음을 사용할 것입니다.

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

그러나 이후 버전에서는 스타일 추가 속성이 스타일로만 변경되었습니다.여기 Angular Github에서 왔습니다.

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