오류 : Node Sass 버전 5.0.0은 ^ 4.0.0과 호환되지 않습니다.

Question 1

npx create-react-appnpm v7.0.7 및 Node v15.0.1에서 다음 명령을 사용하여 빈 React 프로젝트를 만들었습니다.

설치됨 :

React v17.0.1,
node-sass v5.0.0,

그런 다음 빈 .scss 파일을 앱 구성 요소로 가져 오려고했습니다.

App.js

import './App.scss'

function App() {
  return (
    <div className="App">
      App
    </div>
  );
}

export default App;

오류 발생 :

Failed to compile.

./src/App.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/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

package.json

{
  "name": "react-17-node-sass-5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
 ...
 
  }
}

Question 2

TL; DR

npm uninstall node-sass
npm install node-sass@4.14.1

또는 원사를 사용하는 경우 (최신 CRA 버전의 기본값)

yarn remove node-sass
yarn add node-sass@4.14.1

Edit2 : sass-loader v10.0.5가 수정합니다. 문제는 프로젝트 종속성으로 사용하지 않고 종속성의 종속성으로 사용하는 것입니다. CRA는 고정 버전, angular-cli 잠금을 node-sass v4 등에 사용합니다.
현재 권장 사항은 다음과 같습니다. 노드 엉덩이 검사 만 설치하는 경우 해결 방법 (및 참고 사항) 아래에 있습니다. 빈 프로젝트에서 작업 중이고 웹팩 구성을 관리 할 수있는 경우 (CRA 또는 CLI를 사용하여 프로젝트를 스캐 폴딩하지 않음) 최신 sass-loader를 설치하십시오.

편집 :이 오류는 sass-loader 에서 발생 합니다. node-sass @latest는 v5.0.0이고 sass-loader는 ^ 4.0.0을 예상하므로 semver 불일치가 있습니다.
검토해야하는 관련 수정 사항이있는 해당 저장소에 미해결 문제가 있습니다. 그때까지는 아래 솔루션을 참조하십시오.

해결 방법 : 아직 node-sass 5.0.0을 설치하지 마십시오 (주 버전이 방금 충돌 함).

node-sass 제거

npm uninstall node-sass

그런 다음 최신 버전 (5.0 이전)을 설치합니다.

npm install node-sass@4.14.1

참고 : LibSass (따라서 node-sass도 사용되지 않음 )는 더 이상 사용되지 않으며 dart-sass가 권장되는 구현입니다. 대신 순수한 JavaScript로 컴파일 된 dart-sass의 노드 배포 인을 사용할 수 있습니다sass . 하지만 경고 :

이 방법을 사용하는 데주의하십시오. React-scripts는 sass-loader v8을 사용하는데, 이는 sass보다 node-sass를 선호합니다 (node-sass에서 지원하지 않는 일부 구문이 있음). 둘 다 설치되어 있고 사용자가 sass로 작업 한 경우 CSS 컴파일 오류가 발생할 수 있습니다.

Question 3

node-sass 제거

npm uninstall node-sass

다음과 같이 sass 를 사용하십시오 .

npm install -g sass
npm install --save-dev sass

Question 4

이와 같은 오류가 발생하는 유일한 이유는 노드 버전이 노드 엉덩이 버전과 호환되지 않기 때문입니다.

따라서 https://www.npmjs.com/package/node-sass 에서 문서를 확인하십시오.

또는 아래 이미지가 노드 버전이 node-sass 버전을 사용할 수 있도록 도와줍니다.

예를 들어, Windows에서 노드 버전 12 를 사용하는 경우 ( "아마도") node-sass 버전 4.12 를 설치해야합니다 .

npm install node-sass@4.12

그래, 그렇게. 따라서 이제 컴퓨터에 노드가 설치된 node-sass 팀이 권장하는 node-sass 버전 만 설치하면됩니다.

Question 5

기본 yarn패키지 관리자 와 함께 CRA를 사용하는 경우 다음을 사용하십시오. 나를 위해 일했습니다.

yarn remove node-sass 
yarn add node-sass@4.14.1

Question 6

특정 버전의 node-sass 패키지 (node-sass@4.14.1)를 추가 한 후 저에게 효과적이었습니다.

Question 7

이 오류는 NodeJS 및 Node Sass 버전이 일치하지 않을 때 발생합니다.

다음과 같이하여 문제를 해결할 수 있습니다.

-1 단계 : 컴퓨터에서 Nodejs 제거

-2 단계 : Nodejs 버전 14.15.1을 재설치합니다.

-3 단계 : 명령을 실행하여 Node sass 제거npm uninstall node-sass

-4 단계 : 명령을 실행하여 Node sass 버전 4.14.1 재설치npm install node-sass@4.14.1

모든 단계가 끝나면 명령 ng serve -o을 실행하여 애플리케이션을 실행할 수 있습니다.

Node sass 버전 5.0.0은 ^ 4.0.0과 호환되지 않습니다.

Question 8

오류가

오류 : Node Sass 버전 5.0.0은 ^ 4.0.0과 호환되지 않습니다.

1 단계 : 서버 중지

2 단계 : 실행 명령은 npm uninstall node-sass

3 단계 : package.json파일에서 node-sass를 사용할 수 있는지 확인한 다음 2 단계를 다시 실행합니다.

4 단계 : npm install node-sass@4.14.1<=== 명령 실행

5 단계 : 명령이 성공적으로 실행될 때까지 기다립니다.

Step6 : 서버 시작 npm start