Angular에서 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를 지원하도록 하려면 어떻게 해야 할까요? 다음 두 가지 방법이 소개됩니다.

1. 프로젝트 생성 시 지정

2. 현재 프로젝트 수정

1. 프로젝트 생성 시 지정

지정된 디렉터리에서 실행: ng new myProject – style=scss

참고: 여기서는 Angular의 CLI를 사용하여 프로젝트를 생성합니다.

SASS를 지정하려면 scss를 sass로 바꾸면 됩니다.

2. 현재 프로젝트 수정

수정해야 할 두 가지 주요 위치가 있습니다.

기본적으로 styleExt 값을 scss

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

로 설정하세요. myComponent 컴포넌트와 같은 명령이 파일을 생성할 때 기본 접미사는 scss입니다.

앱 아래 스타일에서 styles.css를 styles.scss

 "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"
   }
  }
 ],

로 변경하세요. 참고: 잊지 마세요. 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 디렉터리

3에 _variables.scss 파일을 추가합니다. style.scss 파일의 구성은 다음과 같습니다.

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

:

CSS 및 Sass(SCSS) 개발 사양

SCSS 모바일 페이지 마스크 레이어 효과 구현 및 일반적인 문제 해결

SCSS 코드 작성 시 따라야 할 원칙_html/css_WEB-ITnose

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