react.js 로 웹을 개발하면서 js대신 ts를 쓰듯, css대신 scss로 조금 더 유연하게 작성하는 때가 있다.
scss만으로는 웹 브라우저에서 동작할 수 없기에 css로 컴파일 시키는 과정이 필요하다.
이럴때 LibSass를 node.js 상에서 사용할 수 있는 node-sass를 사용해 쉽게 컴파일을 할 수 있다.
node-sass 패키지를 설치하여야 scss를 본격적으로 사용할 수 있는데npm i node-sass를 하였더니 아래와 같은 문구가 나온다.
Failed to compile.
./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.이는 Node 15에서만 Node-sass 5 버전대가 동작하기에 Node가 이보다 하위 버전인 경우 발생하게 된다. 참고문서
따라서, Node-sass 의 버전을 4 버전대 중 가장 최신 버전인 4.14.1로 설치하면 해결되는 문제이다.
npm uninstall node-sass
npm install node-sass@4.14.1위와 같이 기존 Node-sass를 제거하고 4.14.1 버전의 Node-sass를 설치하면 간단하게 해결될 것이다.
댓글