Angular에서 SCSS를 지원하는 방법

php中世界最好的语言
풀어 주다: 2018-04-14 15:01:45
원래의
1425명이 탐색했습니다.

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!