Angular 프로젝트에서 scss를 사용하는 방법

이번에는 Angular 프로젝트에서 scss를 사용하는 방법과 Angular 프로젝트에서 scss를 사용할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

머리말

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

SCSS는 CSS의 확장이므로 CSS에서 제대로 작동하는 모든 코드는 SCSS에서도 제대로 작동합니다. 즉, Sass 사용자는 SCSS를 완전히 이해하려면 Sass 확장이 어떻게 작동하는지 이해하면 됩니다. 변수, 상위 참조 및 지시문과 같은 대부분의 확장은 동일합니다. 유일한 차이점은 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로 변경하고, CSS 파일에 대한 다른 파일의 참조도 수정해야 한다는 점을 기억하세요. styles.css에 대한 참조는 .angular-cli.json에 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 도서:

노드+스위그를 사용하여 렌더링하기

JS를 사용하여 사진을 조작하고 흑백만 남기기

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