programing

오류: 'node-sass' 버전 5.0.0은 ^4.0.0과 호환되지 않습니다.

telecom 2023. 3. 6. 20:40
반응형

오류: 'node-sass' 버전 5.0.0은 ^4.0.0과 호환되지 않습니다.

리다'라는 빈 리액트.npx create-react-app7 및 Node..1npm v7.0.7 "Node.js v15.0.1"

인스톨 완료:

  • v17.0.1에 반응합니다.
  • v5.0.0 노드 삭제,

그런 다음 빈 .scss 파일을 App 컴포넌트로 Import하려고 했습니다.

파일 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.

파일 패키지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"
  },
 ...

  }
}

TL;DR

  1. npm uninstall node-sass
  2. npm install sass

또는 실을 사용하는 경우

  1. yarn remove node-sass
  2. yarn add sass

Edit3: 네, 다른 편집입니다.sass(dart-sass)로 이동하는 것이 가장 좋은 해결책입니다.이전 버전에는 버전 4.x.x로의 노드 sass 잠금이 포함되어 있었습니다.버전 4.x.x는 2년이 경과하고 새로운 SCSS 기능이 없습니다.


Edit 2: sass-loader v10.0.5에 의해 수정됩니다.문제는 프로젝트 종속성이 아니라 종속성의 종속성으로 더 많이 사용할 수 있다는 것입니다.CRA 에서는 고정 버전, angular-cli locks to node-sass v4 등이 사용됩니다.

현시점에서는, 노드·사스만을 인스톨 하는 경우는, 다음의 회피책(및 주의사항)을 확인해 주세요.빈 프로젝트에서 작업할 때 웹 구성을 관리할 수 있는 경우(CRA 또는 CLI를 사용하여 프로젝트를 구성하지 않음) 최신 sass-loader를 설치하십시오.


편집: 이 오류는 sass-loader에서 발생합니다.node-sass @latest는 v5.0.0이며 sass-loader는 ^4.0.0을 상정하고 있기 때문에 시멘틱버전 미스매치가 존재합니다

리뷰가 필요한 관련 수정과 함께 해당 저장소에 미해결 문제가 있습니다.그 때까지 아래의 해결책을 참조해 주세요.


회피책: 아직 node-sass 5.0.0을 설치하지 마십시오(메이저 버전이 범핑되었습니다).

노드 새스를 제거합니다.

npm uninstall node-sass

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

npm install node-sass@4.14.1


주의: LibSass(노드사스도 마찬가지로)는 권장되지 않으며 dart-sass가 권장되는 구현입니다.대신사용할 수 있습니다.이것은 순수 JavaScript로 컴파일된 Dart-sass의 Node.js 배포입니다.

이와 같은 오류가 발생하는 유일한 이유는 Node.js 버전이 Node-sass 버전과 호환되지 않기 때문입니다.

따라서 반드시 노드 sass에서 문서를 확인하십시오.

또는 다음 이미지는 노드 sass 버전을 사용할 수 있는 Node.js 버전을 결정하는 데 도움이 됩니다.

여기에 이미지 설명을 입력하십시오.

예를 들어 Windows 시스템에서 Node.js 버전12를 사용하고 있는 경우("아마도") 노드용 버전 4.12를 설치해야 합니다.

npm install node-sass@4.12

네, 그렇게요.따라서 Node.js 버전을 컴퓨터에 설치한 상태에서 노드 sass 팀에서 권장하는 노드 sass 버전만 설치하면 됩니다.

노드 새스를 제거합니다.

npm uninstall node-sass

sass 사용 방법:

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

node-sass일명 LibSass는 2020년 10월 26일부로 공식적으로 폐지되었습니다.대신,sass일명 다트 새스.

★★★의 npm을 사용하다

npm uninstall node-sass
npm install sass --save-dev

★★★의 yarn

yarn remove node-sass
yarn add sass

나에게 가장 좋은 해결책은 노드 사스를 제거하는 것이었다.

npm uninstall node-sass

다음으로 sass를 설치합니다.

npm install sass

실을 사용하는 사용자의 경우:

yarn remove node-sass
yarn add sass

기본 Yarn 패키지 매니저에서 CRA를 사용할 경우 다음 명령을 사용하십시오.그것은 나에게 효과가 있었다.

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

npm을 사용하여

  1. npm uninstall node-sass
  2. npm install node-sass
  3. "react-scripts": "4.0.0""react-scripts": "4.0.3"포장되어 있습니다.json and save(존앤세이브
  4. npm install
  5. npm start

또는 실을 사용하여 -

  1. yarn remove node-sass
  2. yarn add --dev node-sass
  3. 위와 같이
  4. yarn install
  5. yarn start

이것은 버전 문제입니다.올바른 종속 버전을 설치합니다.

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

니콜라스 헤비아의 편집2에 따르면

sass-module v10.0.5로 수정

다음 명령을 실행했습니다.

npm install sass-loader@^10.0.5 node-sass --save-dev

그것으로 내 문제는 해결되었다.

제가 개발 환경에 있다는 것을 알아두세요. 경우 --save-dev제거해야 합니다.

node-sass 패키지의 특정 버전(node-sass@4.14.1)을 추가한 후 동작했습니다.

노드 sass는 현재 권장되지 않으므로 Sass로 전환할 수 있습니다.

당신의 소포 안에.json 파일:

"node-sass": "npm:sass@^1.49.9",

React는 노드 sass를 삭제하고 Sass로 교체한 후에도 노드 sass를 요구하므로 이렇게 별칭을 지정할 수 있으며 이제 React는 Sass를 사용합니다.

저도 같은 문제를 만났는데, 이 문제를 해결할 수 있었던 방법은 다음과 같습니다.

어떤 것이 좋을지 합니다.node-sass프로젝트에서 사용 중인 버전입니다. 다음 Node을 현재 Node.js 버전과 .node-sass링크에서 알 수 있습니다.

물론 서버를 중지하고 IDE를 닫습니다.

따라서 Node.js 버전을 업그레이드 또는 다운그레이드하는 가장 좋은 방법은 의 답변에서 설명한 바와 같습니다.그런 다음 를 삭제합니다.node_modules , , , , 입니다.package-lock.json시시시시...이치노

npm cache clean --force

rm -rf /node_modules package-lock.json

npm install

npm audit fix

npm run <your_script_name>

에러가 다음과 같은 경우

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

순서 1: 서버를 정지합니다.

2:는 2입니다.run " " " "npm uninstall node-sass

3: "3: "sass "의 노드 합니다.package.json에서 노드 할 수 있는 경우 실행합니다. 파일에서 node-sass를 사용할 수 있는 경우 스텝2를 다시 실행합니다.

4: § 4:npm install node-sass@4.14.1 명령어> <=== "실행"

스텝 5: 명령어가 정상적으로 실행될 때까지 기다립니다.

6: using '6: start-server'npm start

패키지의 버전을 버전: 4.14.1로 변경하기만 하면 됩니다.json 파일

개발 의존성으로 sass-loader를 추가하면 문제가 해결되었습니다."devdependencies": {"node-sass": "^6.0.0", "sass-loader": "^11.1.1"}

소규모 업데이트:node-sass와 관련하여 다음 오류가 발생할 경우 다음 절차를 따르십시오.

코드 EPERM npm ERR! syscall 링크 해제

문제 해결 절차:

  1. Visual Studio 닫기
  2. .node-sass를 수동으로 삭제합니다.node_modules에서 DELETE
  3. Visual Studio 열기
  4. npm cache verify
  5. npm install node-sass@4.14.1

프로젝트에서 yarn.lock 파일을 삭제하고

yarn remove node-sass
yarn add node-sass

app.js 또는 css를 Import하는 장소에서는 scss가 아닌 css를 Import해야 합니다.패키지의 스크립트.json이 css 파일을 만듭니다.이 파일을 Import해야 합니다.

    "scss": "node-sass --watch -include-path src/scss -o src/css"

이 스크립트는 scss라는 이름의 폴더 내의 scss 파일을 감시합니다.그런 다음 src 내에 css 폴더를 만들고 해당 폴더 내에 css 파일을 추가합니다.이 파일은 app.js로 Import해야 합니다.

스크립트를 실행하려면:

npm run scss

파일 구조 예:src/scss/styles.scss

스크립트에 의해 작성된 CSS 파일:src/css/styles.css

또는 호환성이 오류를 발생시키지 않도록 노드 사스를 재구축합니다.노드 sass와 노드 간에 비호환성이 발생하면 typescript 오류가 발생합니다.노드 sass 호환성을 확보하려면 이 작업을 수행합니다.

npm 리빌드노드 리빌드

이 에러는 노드 sass와 호환되지 않는 버전의 sass 로더로 인해 발생합니다.

패키지 끝에 이러한 종속성을 추가합니다.json 파일.

주의: 어떤 sass-loader 버전이 노드 sass 버전과 호환되는지 구글에서 확인할 수 있습니다.

"devdependencies": {"node-sass": "^6.0.1", "sass-loader": "^10.2.0"}

노드 Sass는 더 이상 사용되지 않으므로 Dart Sass로 대체할 수 있습니다.

경고: LibSass 및 노드 Sass는 사용되지 않습니다.유지보수 릴리스는 무기한으로 계속 제공되지만 새로운 CSS 또는 Sass 기능과의 호환성이나 추가 기능은 없습니다.아직 사용하고 있는 프로젝트는 Dart Sass로 이행해야 합니다.

출처: 노드 섀시

아래 레시피가 도움이 되었습니다.

  1. 언인스톨node-sass:
    • npm:npm uninstall node-sass
    • 실:yarn remove node-sass
  2. 언인스톨sass-loader:
    • npm:npm uninstall sass-loader
    • 실:yarn remove sass-loader
  3. 개발 의존관계로 Dart Sass 설치
    • npm:npm install sass -dev
    • 실:yarn add sass -dev

구축하기 전에 다음 사항도 고려해야 합니다.

  1. node_modules 디렉토리를 삭제합니다.
  2. "이것들"은 다음과 같습니다.
    • npm: 삭제package-lock.json
    • 제거: yarn: 거yarn.json

여기에 이미지 설명 입력

npm 제거 노드 삭제

npm i sass

이 문제를 해결하기 위한 단계:

  1. node_module 폴더로 이동하여 node-sass 모듈을 엽니다.

  2. 패키지 안에.node-backup 내의 json 파일을 "5.0.0"에서 "4.14.1"로 변경합니다.

  3. 드디어 패키지에 들어있네요.메인 프로젝트의 루트에 있는 json은 노드 마운트 버전을 다시 "5.0.0"에서 "4.14.4"로 변경합니다.

이거면 될 거야.

언급URL : https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0

반응형