react : material-css(css/scss) 적용....(삽질 많이 했는데 버전 안맞아서 그랬고T.T)

현재 두잇 리액트 보면서 실습 중에 해결 한 에러 : material.css 는 문제 없이 잘 실행 되었는데 material.scss를 실행시키기 위해 node-sass 를 설치하는데 계속 해당 에러가 노출되었다. 

Error: Node Sass version 9.0.0 is incompatible with ^4.0.0.

구글링 해보며 찾은 것들 다 해보아도 안되었는데(node-sass 이제 못쓰니까 삭제하고 sass 설치해서 써라. 아님 dart sass 설치해서 써라. 해보아도 계속 metarialize.scss를 사용하려면 node-sass를 설치하라는 에러가 떴다.)

결론은 검색 결과는 도움이 안 되었고 ... node version에 맞춰서 node-sass를 설치해서 쓰거나, node-sass버전에 맞는 node version으로 업그레이드하거나 다운그레이드 하는게 맞았고, 설치 명령어 실행 시에 꼭 --ignore-engines를 붙여 함께 실행 해주어야 scss 사용이 가능해지는 것을 확인했다. (--ignore-engines 는 특정 버전 설치시에는 꼭 사용)

먼저, 책에서 정해준 환경과 버전에 맞추어 실행하면 문제없이 실행되는 것이기는 하다. But 나는 그냥 실습만 빠르게 해보려고 노드 버전을 최신 lts 버전인 v23.3.0 으로 사용 중이었는데 이게 문제 였던 것.

OS = Macbook M1 (OS X) 64bit 

환경에서 실행 중이고 현재 node-sass 최신 버전은 9.0.0으로 node 버전 20까지만 지원을 한다. 이말인 즉슨, node-sass@9.0.0은 아직 내가 사용 중인 node -v 23.3.0에서 사용 할 수 없는 것....

https://github.com/sass/node-sass/releases/tag/v9.0.0

Release v9.0.0 · sass/node-sass

그래서 실습중인 책에서 권장하는...(다시 읽어보니 노드제이에스 8버전에 맞춰서 개발 되어있다고 적혀있네...;) 무튼 실습중이니 해당 버전에 맞추기 위해 nodeJs 버전을 v10.10.0 사용으로 바꿔 주었다.

#nodeJS 버전 변경
nvm use 10.10.0
#nodeJS 버전 변경 고정설정
nvm alias default 10.10.0
#노드 버전 확인
node -v

바꿔 준 뒤에 실습 책의 package.json 내용 참고해서 라이브러리 설정 다시 해주고 node_modules 폴더 지우고, yarn.lock 지우고 다시 설치 해주었다. 

#package.json 파일에 있는 node-sass 버전
...
"node-sass": "^4.11.0"
...

#라이브러리 재설정 프로젝트 루트에서 명령어실행(호환에러 무시하고 설치진행하려고 --ignore-engines 추가
yarn install --ignore-engines

책에 있는 버전인 4.11.0 호환되는 node버전에 10있음.... 

https://github.com/sass/node-sass/releases/tag/v4.11.0

Release v4.11.0 · sass/node-sass

#혹시 yarn start했는데 노드 버전 에러 나오면, node-sass 삭제하기 
yarn remove node-sass

#현재 사용 중인 노드 버전에 맞는 node-sass깔기 (--dev는 package.json의 devDepencies에서 하나 이상 설치)
yarn add --dev node-sass@4.11.0 --ignore-engines

materialize.css / materialize.scss 사용할 때 zip파일 다운 받아서 압축 풀어서 써도 되긴 한데... 나는 걍 아래 명령어로 node_modules아래에 받아주었다. 

 yarn add materialize-css

프로젝트 내의 node_modules 폴더에서 materialize-css 폴더 아래에 materialize.css , materialize.scss를 import해서 사용하면 된다. 

#App.js에서 각각 임포트해서 사용하면 됨....
//materialize.css 사용
import 'materialize-css/dist/css/materialize.min.css'
//materialize.scss 사용
import 'materialize-css/sass/materialize.scss';

지금 생각해보면 그냥 에러가 알려준대로 했으면 금방 끝날 문제였는데 오늘의 까막눈이었따...; ㅜㅜ

1. node-sass와 버전과 호환이 되는 node의 버전을 설치하면 해결 된다. 

2. 정해진 버전으로 설치할 때는 --ignore-engines 옵션 추가하여 설치 하자.