[css] CSS에서 CSS로 각도 cli

Program / 글쓴이

설명서를 읽었으며 사용 scss하려면 다음 명령을 실행해야합니다.

ng set defaults.styleExt scss

그러나 그렇게하고 파일을 만들 때 여전히 콘솔 에서이 오류가 발생합니다.

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

답변

Angular 6의 경우 공식 문서를 확인하십시오.

참고 : 대한 @angular/cli보다 이전 버전을 6.0.0-beta.6사용하는 ng set대신에 ng config.

기존 프로젝트

기본 css스타일 로 설정된 기존 angular-cli 프로젝트 에서 몇 가지 작업을 수행해야합니다.

  1. 기본 스타일 확장명을 scss

.angular-cli.json(Angular 5.x 이상) 또는 angular.json(Angular 6+) 에서 수동으로 변경 하거나 다음을 실행하십시오.

ng config defaults.styleExt=scss

오류가 발생 Value cannot be found.하면 다음 명령을 사용하십시오.

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

(* 출처 : Angular CLI SASS 옵션 )

  1. 기존 .css파일의 이름 을 .scss(예 : styles.css 및 app / app.component.css)

  2. CLI를 지정하여 스타일을 찾으십시오.

수동으로 파일 확장자 변경 apps[0].styles의를angular.json

  1. 새 스타일 파일을 찾으려면 구성 요소를 가리 킵니다.

styleUrls새 파일 이름과 일치하도록 구성 요소를 변경하십시오.

향후 프로젝트

@Serginho가 언급했듯이 ng new명령을 실행할 때 스타일 확장을 설정할 수 있습니다

ng new your-project-name --style=scss

나중에 작성하는 모든 프로젝트의 기본값을 설정하려면 다음 명령을 실행하십시오.

ng config --global defaults.styleExt=scss

답변

ng6부터는 angular.json루트 수준에서 다음 코드를 추가하여 수행 할 수 있습니다 .

수동 변경 .angular.json:

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

답변

angular.json 파일을 엽니 다

1.에서 변경

"schematics": {}

에

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"
             }
  }
  1. 에서 변경 (두 곳에서)

"src/styles.css"

에

"src/styles.scss"

그런 다음 모든 .css파일 을 확인하고 이름을 바꾸고 component.ts 파일을 업데이트하십시오..css to .scss

답변

각도 6의 경우

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

참고 : @ schematics / angular는 Angular CLI의 기본 회로도입니다.

답변

Angular CLI를위한 CSS 프리 프로세서 통합 : 6.0.3

새 프로젝트를 생성 할 때 스타일 파일에 원하는 확장자를 정의 할 수도 있습니다.

ng new sassy-project --style=sass

또는 기존 프로젝트에서 기본 스타일을 설정하십시오.

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

모든 주요 CSS 전처리기에 대한 각도 CLI 설명서

답변

기존 프로젝트의 경우 :

에서 angular.json파일

  1. 에서 build부분에서 test일부 대체 :

    "styles": ["src/styles.css"], 으로 "styles": ["src/styles.scss"],

  2. 바꾸다:

    "schematics": {}, 으로 "schematics": { "@schematics/angular:component": { "style": "scss" } },

ng config schematics.@schematics/angular:component.styleext
scss명령 사용 은 작동하지만 구성을 동일한 위치에 두지 않습니다.

프로젝트에서.css 파일 이름 을.scss

새 프로젝트 의 경우이 명령은 모든 작업을 수행합니다.

ng n project-name --style=scss

글로벌 구성

새 버전에는 전역 명령이없는 것 같습니다

답변

사용 명령 :

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