Angular에서 SCSS를 지원하는 방법

이번에는 Angular에서 SCSS를 지원하는 방법과 Angular에서 SCSS를 지원할 때 Notes가 무엇인지 알아보겠습니다.

scss 소개

SCSS는 Sass 3에 도입된 새로운 구문입니다. 해당 구문은 CSS3과 완벽하게 호환되며 Sass의 강력한 기능을 상속합니다. 즉, 모든 표준 CSS3 스타일 시트는 동일한 의미를 지닌 유효한 SCSS 파일입니다. 또한 SCSS는 대부분의 CSS 핵(일부 CSS)을 인식합니다. 팁) 및 이전 IE 필터 구문과 같은 브라우저별 구문이 있습니다. SCSS는 CSS의 확장이므로 CSS에서 작동하는 모든 코드는 SCSS에서도 작동합니다. 즉, Sass의 경우 사용자는 SCSS를 완전히 이해하려면 Sass 확장의 작동 방식만 이해하면 됩니다. 변수, 상위 참조 등 대부분의 확장 지침은 모두 동일합니다. 유일한 차이점은 SCSS에는 줄 바꿈 및 들여쓰기 대신 세미콜론과 중괄호가 필요하다는 것입니다. 컴포넌트에 스타일을 추가할 때 스타일의

모듈화

를 위해 일반적으로 SCSS와 SASS를 사용합니다. 그렇다면 Angular 프로젝트가 SCSS 또는 SASS를 지원하도록 하려면 어떻게 해야 할까요? 다음은 2가지 방식으로 소개됩니다.

프로젝트 생성 시 지정

1. 현재 프로젝트 수정

2. 1. 프로젝트 생성 시 지정

지정된 디렉터리에서 실행: ng new myProject –style=scss 참고: 여기서는 Angular의 CLI를 사용하여 프로젝트를 생성합니다.

SASS를 지정하려면 scss를 sass로 바꾸십시오.

2. 현재 프로젝트 수정

angle-cli.json 파일을 수정해야 하는 두 가지 주요 위치가 있습니다. styleExt 값을 기본값으로 scss

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

로 설정하세요. 이러한 방식으로 ng g 구성 요소 myComponent와 같은 명령을 실행하여 파일을 생성할 때 기본 접미사는 ​​scss

입니다. apps

 "apps": [
  {
   "root": "src",
   "outDir": "dist",
   "assets": [
    "assets",
    "favicon.ico"
   ],
   "index": "index.html",
   "main": "main.ts",
   "polyfills": "polyfills.ts",
   "test": "test.ts",
   "tsconfig": "tsconfig.app.json",
   "testTsconfig": "tsconfig.spec.json",
   "prefix": "app",
   "styles": [
    "styles.scss"
   ],
   "scripts": [],
   "environmentSource": "environments/environment.ts",
   "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
   }
  }
 ],

아래 스타일에서 styles.css를 styles.scss로 변경하세요. 참고: style.css 파일의 접미사를 수정하는 것을 잊지 마세요.

angularcli는 CSS 프로젝트를 scss 프로젝트로 변환합니다

방법 1:

추가 시 기본값은 scss

ng new My_New_Project --style=scss

입니다.

방법 2:

1. .angular-cli.json구성 파일 수정:

"defaults": {
   "styleExt": "scss",
}
"styles": [
    "styles.scss"
   ],

2. src 디렉토리에 _variables.scss 파일을 추가하세요 3. style.scss 파일의 구성은 다음과 같습니다.

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

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

추천 도서:

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