Angular CLI 프로젝트에서 CSS에서 SCSS로 성공적으로 전환하는 방법은 무엇입니까?

CSS에서 SCSS로 Angular CLI 전환

Angular CLI는 프로젝트에서 SCSS 스타일시트를 활용할 수 있는 기능을 제공합니다. 그러나 SCSS를 구현하는 동안 "해당 파일 또는 디렉터리가 없습니다"라는 오류가 발생한 경우 특정 단계를 수행해야 합니다.

기본 스타일 확장 명령

문서에 언급된 대로 "ng set defaults.styleExt scss"를 실행하면 기본 스타일 확장이 SCSS로 설정되어야 합니다. 그러나 이 명령이 예상대로 작동하지 않을 수도 있습니다.

기존 프로젝트에 대한 솔루션

1. 기본 스타일 확장자를 SCSS로 변경:

   • .angular-cli.json 편집 (Angular 5.x 이하) 또는 angle.json (Angular 6 ) 파일을 사용하여 "defaults.styleExt"를 "scss"로 수동으로 설정합니다.

2. CSS 이름 바꾸기 파일을 SCSS로 변환:

   • 기존 ".css" 파일을 SCSS로 변환 ".scss"를 선택하고 프로젝트의 참조를 업데이트합니다.

3. CLI를 styles.scss로 지정합니다.

   • 수정 새로운 styles.scss를 가리키는 angle.json 파일의 "styles" 배열 파일.

4. 구성 요소 참조 업데이트:

   • 업데이트된 내용을 반영하도록 개별 구성 요소 파일의 "styleUrls" 속성을 조정합니다. SCSS 파일 이름.

향후 프로젝트에 대한 기본값 설정

새 프로젝트를 생성할 때 프로젝트 생성 중에 스타일 확장을 지정할 수 있습니다.

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

모든 새 프로젝트에 대한 기본 스타일 확장을 설정하려면 전 세계적으로:

ng config --global defaults.styleExt=scss

위 내용은 Angular CLI 프로젝트에서 CSS에서 SCSS로 성공적으로 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!