angular-cli로 생성한 프로젝트에 scss 사용하는 방법

안녕하세요.

오늘은 angular-cli를 사용하여 만든 angular5 프로젝트에 scss를 사용할 수 있도록 설정하는 방법에 대해서 알아보겠습니다.

목적

• angular-cli를 사용하여 만든 angular5 프로젝트에 scss 적용합니다.

진행방법

• angular-cli를 사용하여 프로젝트를 최초로 생성할때 scss 적용해보기
• 이미 만들어진 angular-cli에 scss 적용해보기
  (angular-cli가 설치되어 있다는 가정하에 설명합니다.)

angular-cli를 사용하여 프로젝트를 최초로 생성할때 scss 적용하는 방법

1. style 옵션에 scss를 설정하고 프로젝트를 생성합니다.
2. $ ng new my-app --style=scss

이미 만들어진 angular-cli 프로젝트에 scss 적용하는 방법

1. scss 를 적용하고자 하는 프로젝트에 진입합니다.
2. 아래 명령어를 사용하여 node-sass 플러그인을 설치합니다.
   $ npm install node-sass --save-dev (--save-dev 모드로 설치하는 이유는 실제 배포시에는 필요하지 않기 때문입니다. )
   (--save와 --save-dev차이점 알아보기)
3. $ ng set defaults.styleExt scss 명령어를 입력합니다.

4. .angular-cli.json 파일을 열고 styles.scss를 추가합니다. (style.css 파일을 제거했다면, 배열안에 내용도 지워주세요.)
   

   
   
   (기존의 css파일을 사용하지 않을 경우, 제거하면 됩니다.)
   
   
5. 이외의 모든 component.ts 에도 모두 scss로 변경하여 사용합니다.
   
   

모두 즐거운 코딩하세요~