내 Angular-CLI 프로젝트를 CSS에서 SCSS로 어떻게 변환합니까?

Angular-CLI 프로젝트를 CSS에서 SCSS로 변환

Angular-CLI 프로젝트에서 SCSS를 사용하려고 하면 오류가 발생할 수 있습니다. styles.css 파일이 존재하지 않는 것과 관련하여. 이 오류는 ng set defaults.styleExt scss 명령을 사용하여 기본 스타일 확장을 SCSS로 설정했음에도 불구하고 발생합니다.

해결책:

이 문제를 해결하려면 다음 단계를 따르세요. :

기존 프로젝트의 경우(다음보다 오래된 Angular CLI 버전) 6):

1. 기본 스타일 확장자를 SCSS로 변경합니다.

   • .angular-cli.json 파일을 수동으로 편집하고 CSS를 scss로 바꿉니다. 스타일 배열에서.

   • 또는 명령:

     ng config defaults.styleExt=scss

2. 기존 CSS 파일을 SCSS로 변환:

   • 포함하여 모든 기존 .css 파일 이름을 .scss로 바꿉니다. styles.css.

3. 빌드 구성 조정:

   • .angular-cli.json에서 apps[0].styles 속성을 편집합니다. 파일을 만들고 .css 확장자를 다음으로 바꿉니다. .scss.

4. 구성 요소 스타일 업데이트:

   • 새 .scss 파일을 가리키도록 구성 요소 파일의 styleUrls 배열을 변경합니다.

의 경우 기존 프로젝트(Angular CLI 버전 6 ):

위와 동일한 단계를 사용하여 .angular-cli.json 대신 angle.json 파일을 편집합니다. 또한 "값을 찾을 수 없습니다." 오류가 발생하는 경우 다음 명령을 실행하세요.

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

새 프로젝트의 경우:

1. 새 항목을 생성할 때 스타일 확장으로 SCSS를 지정하세요. 프로젝트:

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

2. SCSS를 모든 향후 프로젝트의 기본값으로 설정(선택 사항):

   ng config --global defaults.styleExt=scss

다음 단계를 따르면, SCSS를 사용하도록 Angular-CLI 프로젝트를 성공적으로 구성하게 됩니다.

위 내용은 내 Angular-CLI 프로젝트를 CSS에서 SCSS로 어떻게 변환합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!