[React] cra v2.0 (eject 없이 sass path 잡기) 덤으로 cross-env Windows.ver

create-react-app (cra)가 v2.0가 된지 벌써 몇달이 됐죠 곧 3.0으로 간다고 하는데 현재는 v2.0 버전을 쓰고 있으니까요~

eject는 프로젝트 막바지에 cra버전은 그대로 fixed하고 eject로 따로 포크떠서 진행할 예정인데요

그전에 sass 모듈이 cra 2.0에서는 기본 지원이여서 너무 편했지만!

import styles from './RecentPostWrapper.scss';

그냥 이렇게 ! 모듈을 불러오면 만사 OK!!

하지만 기본적으로 node-sass는 설치 해주어야 합니다!

"dependencies": {

"classnames": "^2.2.6",

"cross-env": "^5.2.0",

"include-media": "^1.4.9",

"node-sass": "^4.11.0",

"query-string": "^6.3.0",

"react": "^16.8.3",

"react-dom": "^16.8.3",

"react-redux": "^6.0.1",

"react-router": "^4.3.1",

"react-router-dom": "^4.3.1",

"react-scripts": "^2.1.8",

"redux": "^4.0.1",

"redux-saga": "^1.0.2",

"redux-thunk": "^2.3.0"

},

현재 저는 윈도우에서 사용하고있는데 일단 컴포넌트들에 대한 path 를 잡기 위해서

cross-env를 사용하고 있습니다.

cross-env를 설치 한 후에! package.json 에 start script 에 

"start": "cross-env NODE_PATH=src react-scripts start",

이와같이 cross-env를 통하여서 src를 루트로 잡아 주게 됩니다.

보시면 PageTemplate.js 에서 호출하고 있지만 Blog Header를 components/common/BlogHeader로 호출하고 있습니다.

cross-env가 없었다면  ../BlogHeader로 호출했을 것 같습니다. 더 짧아서 좋은거 아니냐! 할수 있지만  

같은 경로에 있기 때문에 그렇지 다른 경로에 있다면 루트 경로가 지정되어있지 않은건 상당한 불편함과 개발 진행이 늦어질수 있습니다.

자 그렇다면 Style을 사용하기위해 SASS를 쓰는데 이에 대한 util.scss는 어떻게 될까요?

@import '../../../styles/utils.scss';

 

???????     ../ ../ ../ ../ 이게 도대체 무엇인가요!!!! 컴포넌트도 이처럼 

@import 'style/utils.scss';

 이렇게 하고싶은걸요..

그러는 와중 CRA공식 문서를 보다보니 이런 글이..

NODE_PATH 처럼 node-sass는 SASS_PATH 를 지원한다고????? ../../ 너무 거슬렸는데;;;

(** 여기서 유의 저는 cra1.0에서 이것저것 해보다가 2.0으로 넘어왔다)

.env 파일을 수정하라고 되어있지만   윈도우에서 수정 부분을 이 아닌 것으로 보여 

// @import '../../../styles/utils.scss';

@import 'styles/utils.scss';

그냥 수정하니 .. 지원된다... 그냥 되는거였습니다... 공식홈페이지 자주보겠습니다.

@import '../PageTemplate/PageTemplate.scss';

확실한지 확인하기 위해서 해당 scss를 수정하겠습니다.

// @import '../PageTemplate/PageTemplate.scss';

@import 'components/common/PageTemplate/PageTemplate.scss';

음.. 잘되네요

** cra2초반버전에서는 안되는것으로 보여서

공식 홈 다시 보니! 2.1.2 밑으로 쭈욱 내리다 보면

!!!!!!!!! SASS_PATH???

#5917을 따라 들어가 보니

그렇다 추가 된 것이였다.

https://github.com/facebook/create-react-app/pull/5917

공식 홈을 자주보는 것을 생활화 합시다!!!

https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet