[React] CRA에서 eject없이 SCSS사용하기

CRA에서 eject없이 SCSS사용하기

1. sass 설치 => scss를 css로 변환해 주는 라이브러리

yarn add node-sass

2. styles 폴더 생성, 내부에 scss폴더 생성 후 scss파일 생성

3.터미널 에서 사용시, package.json에서 script에 "sass"명령어를 추가해 주어야 한다. => 이 때는 map파일도 같이 생성되어 원하지 않을 경우 따로 map파일이 생성되지 않도록 설정할 필요가 있다.

"sass": "sass --watch src/styles/scss:src/styles/css"

yarn run sass => watch 시작

익스텐션 사용시 : liveSass 경로 설정 => /src/styles/css 폴더에 css파일이 생성되도록 설정

3. watching 켜고 scss파일 작성하면 css파일이 css경로에 자동 생성된다.

4. css파일 import 해서 모듈화 하여 사용 => 파일명에 'module' 꼭 붙여야 한다.

import styles from "./button.module.scss";

 

참고하기 좋은 문서

Sass(SCSS) 완전 정복!