SCSS를 사용할 때 Angular-CLI에서 'styles.bundle.js:33 Uncaught Error'를 수정하는 방법은 무엇입니까?

SCSS와 함께 Angular-CLI를 사용할 때 "styles.bundle.js:33Uncaught Error" 오류 문제 해결

Angular가 다음과 같은 문제에 직면했습니다. -CLI를 사용할 때 "styles.bundle.js:33Uncaught Error" 오류가 발생합니다. SCSS. 문서에는 ng set defaults.styleExt scss를 실행하면 이 문제가 해결된다고 명시되어 있지만 작동하지 않습니다. 이에 대한 이유를 살펴보고 포괄적인 솔루션을 제공하겠습니다.

오류 원인

CLI가 여전히 CSS 파일을 찾아 번들로 묶으려고 하기 때문에 오류가 발생합니다. 스타일링. Angular-CLI는 처음에 CSS를 기본 스타일 확장으로 시작합니다. SCSS를 사용하려면 SCSS 파일을 인식하고 처리하도록 CLI를 구성해야 합니다.

기존 프로젝트를 위한 솔루션

1. 기본 스타일 확장 업데이트:

   • Angular에서 5.x 이하에서는 .angular-cli.json 파일을 수정합니다.
   • Angular 6에서는 angle.json 파일을 변경합니다.
   • 또는 ng config defaults.styleExt=scss를 실행합니다. 오류가 발생하면 ng config skimatics.@schematics/angular:comComponent.styleext scss를 사용하세요.

2. CSS 파일 이름을 SCSS로 바꾸세요:

   • styles.css 및 구성요소 CSS 파일 변경(예: app/app.comComponent.css)를 styles.scss 및 해당 구성 요소 SCSS 파일로 변환합니다.

3. Angular.json 업데이트(Angular 6에만 해당):

   • apps[0].styles의 파일 확장자를 수정합니다. angular.json.

4. 구성 요소를 새 스타일 파일로 지정:

   • 구성 요소 정의의 styleUrls 속성을 다음으로 변경합니다. 새 SCSS 파일과 일치 이름.

향후 프로젝트를 위한 솔루션

1. 프로젝트 생성 중 스타일 확장 설정:

   • 다음을 사용하여 새 프로젝트를 만들 때 새로 지정하려면 --style=scss를 지정하세요.

2. 전역 기본값 설정:

   • SCSS를 선호하는 경우 향후 모든 프로젝트의 기본 스타일 확장으로 다음을 실행하세요.

   ng config --global defaults.styleExt=scss

위 내용은 SCSS를 사용할 때 Angular-CLI에서 'styles.bundle.js:33 Uncaught Error'를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!