node-sass 설치 에러 해결 방법과 원인..

🐕 node-sass 에러 몬데

npm ERR! code 1
npm ERR! path C:\Users\사용자이름\OneDrive\바탕 화면\Storybook\node_modules\node-sass
npm ERR! command failed

package.json을 기반으로 npm install을 진행하던 중

위와 같이 code 1 에러가 발생하면 node-sass를 설치하는 중에 오류가 발생했습니다.

아무튼 문제는 해결해야하니까 node-sass에 대해서 검색을 좀 해보는데

 

https://jeonghwan-kim.github.io/dev/2020/06/27/node-sass.html

 

대충 이런식의 글들을 많이 찾아볼 수 있습니다.

node-sass는 노드 버전에 의존적이어서 노드 버전을 올리면 오류가 발생할 확률이 높다.

 

위 글에서 알고 싶던 내용만 뽑아오면 다음과 같이 정리할 수 있을 것 같습니다.

node-sass는 C++애드온을 이용해 libsass를 node환경에서 사용하는데
이 C++ 애드온이 v8 버전에 의존적이기 때문에 v8 엔진이 업그레이드 되면 버전 이슈가 발생할 수 있다.

 

이걸 해결하기 위해서 N-API 방식을 통해 해결할 수 있다고하는데..

빠르게 해결하고 싶으실테니까

N-API 방식은 나중에 알아서 학습해보시는 것을 추천드리고

제가 추천드리는 방법은 간단한 솔루션 3개입니다.

1. node.js의 버전을 낮춰라.

2. package.json을 수정하여 node-sass를 설치하지않거나 node-sass대신 sass를 설치해라.

3. node-sass의 버전을 높여라

예컨대 전 2023-04-16 기준으로 node의 버전을 18.14.0으로 사용 중이었습니다.

https://github.com/sass/node-sass

GitHub - sass/node-sass: Node.js bindings to libsass

node-sass에서도 LibSass와 nodesass는 더이상 지원하지 않을 것이니

Dart Sass를 사용할 것을 권고하고있습니다.

각 노드버전에 따라 서포트 되는 node-sass 버전에 대한 정리표입니다.

해석하기 좀 난해하지만 < 등호를 봤을때 따로 < 등호가 명시되지 않은 경우엔

최소 버전만 명시해둔 것 같아보이네요

 

제 해석이 맞다고 생각하고 표를 해석해보면 제 노드 버전은 18이니

8.0+ 버전부터 서포트가 되는데

  "devDependencies": {
    "@storybook/addon-actions": "^6.3.6",
    "@storybook/addon-essentials": "^6.3.6",
    "@storybook/addon-links": "^6.3.6",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/node-logger": "^6.3.6",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.3.6",
    "codestates-assignment-manager": "^1.8.0",
    "node-sass": "^7.0.0",
    "react-test-renderer": "^17.0.2",
    "webpack": "^5.78.0"
  }

제가 설치를 시도한 node-sass의 버전은 7.0.0이기때문에 

node.js 버전이 18인 환경에서는 설치가 되지 않던것이겠네요.. 아님 말고

 

따라서 해결방법은 자신의 노드 환경에 맞추어 node-sass의 버전을 높이든지..

아니면 자신의 노드 환경을 설치를 원하는 node-sass의 버전에 맞춰주면 되겠습니다.

노드버전매니저 nvm을 이용하여 버전을 16.13.0으로 낮춰준 다음

동일한 package.json을 설치해보겠습니다.

워닝이 좀 뜨긴하지만 잘 설치되네요..

다른 방법으로는 설치하고자하는 node-sass의 버전을 올려주어도 될것입니다.

 

node버전을 낮추고 싶지 않은 경우 그리고 node-sass 깃허브의 안내를 충실히 따르는 경우엔

dart sass를 사용하는 방법을 고려할 수 있습니다.

https://sass-lang.com/install

Sass: Install Sass

dart sass는 다음 안내를 따라서 설치하시면 되는데

저같이 package.json을 기반으로 설치해야하는 경우에는

package.json을 어떻게 손봐주지 않으면 안될것입니다.

  "devDependencies": {
    "@storybook/addon-actions": "^6.3.6",
    "@storybook/addon-essentials": "^6.3.6",
    "@storybook/addon-links": "^6.3.6",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/node-logger": "^6.3.6",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.3.6",
    "codestates-assignment-manager": "^1.8.0",
    "node-sass": "^7.0.0",
    "react-test-renderer": "^17.0.2",
    "webpack": "^5.78.0"
  }

dependencies 혹은 devDependencies속성의 의존성들을 확인하면서

node-sass를 찾습니다.

node-sass를 없애주거나 sass가 필요한경우 dartsass로 바꿔주도록하겠습니다.

  "devDependencies": {
    "@storybook/addon-actions": "^6.3.6",
    "@storybook/addon-essentials": "^6.3.6",
    "@storybook/addon-links": "^6.3.6",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/node-logger": "^6.3.6",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.3.6",
    "codestates-assignment-manager": "^1.8.0",
    "react-test-renderer": "^17.0.2",
    "webpack": "^5.78.0",
    "sass": "^1.32.12"
  }

---

🐶결론

 

node-sass 대신 dart sass를 쓰세요
피치못한 사정이 있다면 node 버전을 유의하세요

 

---

이해했다고 생각할 때가 가장 무서울 때다.