지금까지 React나 html에서 css를 적용할 때 컴포넌트별,페이지별로 CSS를 적용하였다.
하지만 React에서는 일반적인 css적용 외에 sass/scss와 styled-components 등을 이용한
css스타일링 방식이 있기 때문에 다양한 스타일링 방식에 대해 공부하려고
sass에 대해 기본적인 공부를 하고 설치를 해보았다.
{
./src/SassComponent.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf- 5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url- loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5- 4!./src/SassComponent.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
}
이러한 설치 error 메시지가 떴고, 구글링 해본 결과 CRA로 만들어진 프로젝트는
현재 설치되는 Sass버전 5.0.0과 충돌이 일어나므로 4버전으로 깔아야된다고 한다.
//node-sass 삭제
$ npm uninstall node-sass
//node-sass 4.14.0 버전 설치
$ npm install node-sass@4.14.0
sass를 지우고 4버전으로 다시 install하니 정상적으로 설치가 되었다.