Angular 프로젝트에서 scss를 사용하는 단계에 대한 자세한 설명

이번에는 Angular 프로젝트에서 scss를 사용하는 단계에 대해 자세히 설명하겠습니다. Angular 프로젝트에서 scss를 사용할 때 주의 사항은 무엇입니까?

머리말

SCSS는 Sass 3에 도입된 새로운 구문입니다. 해당 구문은 CSS3와 완벽하게 호환되며 Sass의 강력한 기능을 상속합니다. 즉, 모든 표준 CSS3 스타일시트는 동일한 의미를 갖는 유효한 SCSS 파일입니다. 또한 SCSS는 대부분의 CSS 핵(일부 CSS 트릭)과 고대 IE 필터 구문과 같은 브라우저별 구문도 인식할 수 있습니다.

SCSS는 CSS의 확장이므로 CSS에서 제대로 작동하는 모든 코드는 SCSS에서도 제대로 작동합니다. 즉, Sass 사용자는 SCSS를 완전히 이해하려면 Sass 확장이 어떻게 작동하는지 이해하면 됩니다. variables, 상위 참조 및 지시문과 같은 대부분의 확장은 동일합니다. 유일한 차이점은 SCSS에는 개행 및 들여쓰기 대신 세미콜론과 중괄호가 필요하다는 것입니다.

Angular CLI는 다음을 포함한 다양한 CSS 전처리를 지원합니다. yl(스타일러스)

• 기본값은 다음과 같습니다. CSS.
  Angular에는 CSS 전처리를 지정하는 두 가지 방법이 있습니다. 아래의 예를 들어 scss를 살펴보겠습니다.

• 새 프로젝트에 대한 CSS 사전 처리 지정

• 새 각도 프로젝트에서 --style을 사용하여 CSS 사전 처리 지정

ng new my-project --style=scss

기존 프로젝트에 대한 CSS 사전 처리 지정

For 기존 프로젝트는 CSS 전처리 수정도 지원합니다.

View .angular-cli.json, 기본 구성 항목에 다음과 유사한 문이 있습니다.

"defaults": {
 "styleExt": "css",
 "component": {}
}

set 명령을 사용하여 styleExt를 수정하세요.Ext

ng set defaults.styleExt scss

프로젝트에서 scss를 일률적으로 사용하는 경우, 프로젝트의 CSS 파일을 scss로 저장하세요. 또한 다른 파일의

references도 CSS 파일로 수정하세요. styles.css에 대한 참조는 .angular-cli.json에 있습니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Axios에서 302 상태 코드 문제를 해결하는 방법

vue 선택 구성 요소를 작동하고 비활성화하는 방법

위 내용은 Angular 프로젝트에서 scss를 사용하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!