Dnote 3 - 1. React - 개발 환경 설정 및 구조 잡기.(sass 설정)

killi8n·2018년 9월 20일
2

Dnote

목록 보기
3/15
post-thumbnail

자 이제 프로젝트를 모두 생성했으니, 리액트쪽부터 건들여 볼까요?

eject 하기

sass를 사용하려면 eject를 해서 설정파일들을 만져줘야 하므로 일단 eject부터 하겠습니다.

첫화면이 잘 뜬다면 다음으로 넘어가겠습니다.

sass 설정

일단 css대신 scss를 쓰려면 다음 패키지들을 다운로드 해주세요.

그리고 config/paths.js 로 이동해주세요.

config/paths.js

그런 다음 src밑에 styles폴더를 생성하여 주세요.

그 후 config/webpack.config.dev.js 로 이동하여 주세요.

config/webpack.config.dev.js

쭉 내리다보면 위와같은 부분이 있는데, 찾는 팁을 드리자면
ctrl + f 하고 .css로 찾은뒤 첫번째로 찾아지는 부분입니다.

저 위 코드들을 쭉 복사하신후 바로 밑에 붙여넣기 해주세요.

그 뒤에 다음과 같이 설정해줍니다.

config/webpack.config.prod.js로 이동해줍니다.

config/webpack.config.prod.js

자 이제 sass에 대한 환경 설정은 모두 끝났습니다.

profile
killi8n

1개의 댓글

comment-user-thumbnail
2019년 1월 23일

react 2.1.2 부터는 sass 설정 필요없이 yarn add node-sass 를 통해서 가능하다고 하네요.
https://github.com/facebook/create-react-app/pull/5917
https://youtu.be/w9Zf0hpohQM?t=196

답글 달기