[css] CSS에서 CSS로 각도 cli
설명서를 읽었으며 사용 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 프로젝트 에서 몇 가지 작업을 수행해야합니다.
- 기본 스타일 확장명을
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 옵션 )
-
기존
.css
파일의 이름 을.scss
(예 : styles.css 및 app / app.component.css) -
CLI를 지정하여 스타일을 찾으십시오.
수동으로 파일 확장자 변경
apps[0].styles
의를angular.json
- 새 스타일 파일을 찾으려면 구성 요소를 가리 킵니다.
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"
}
}
- 에서 변경 (두 곳에서)
"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
답변
기존 프로젝트의 경우 :
에서 angular.json
파일
-
에서
build
부분에서test
일부 대체 :"styles": ["src/styles.css"],
으로"styles": ["src/styles.scss"],
-
바꾸다:
"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