Fehler: Node Sass Version 5.0.0 ist nicht kompatibel mit ^ 4.0.0

Ich habe ein leeres React-Projekt mit dem folgenden Befehl erstellt: npx create-react-appon npm v7.0.7 und Node v15.0.1

Eingerichtet:

• Reagiere v17.0.1,
• node-sass v5.0.0,

Dann habe ich versucht, eine leere .scss-Datei in die App-Komponente zu importieren:

App.js.

import './App.scss'

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

export default App;

Wirf einen Fehler:

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"
  },
 ...
 
  }
}

TL; DR

1. npm uninstall node-sass
2. npm install [email protected]

Edit2 : sass-loader v10.0.5 behebt das Problem . Das Problem ist, dass Sie es möglicherweise nicht als Projektabhängigkeit verwenden, sondern eher als Abhängigkeit Ihrer Abhängigkeiten. CRA verwendet eine feste Version, Angular-Cli-Sperren für Node-Sass v4 usw.
Die Empfehlung für den Moment lautet: Wenn Sie nur Node-Sass installieren, überprüfen Sie die folgende Problemumgehung (und den Hinweis). Wenn Sie an einem leeren Projekt arbeiten und Ihre Webpack-Konfiguration verwalten können (ohne CRA oder CLI als Gerüst für Ihr Projekt), installieren Sie den neuesten Sass-Loader.

Bearbeiten : Dieser Fehler kommt vom Sass-Loader . Es gibt eine Semver-Nichtübereinstimmung, da node-sass @latest v5.0.0 ist und sass-loader ^ 4.0.0 erwartet.
In ihrem Repository gibt es ein offenes Problem mit einem zugehörigen Fix, der überprüft werden muss. Beziehen Sie sich bis dahin auf die folgende Lösung.

Problemumgehung : Installieren Sie Node-Sass 5.0.0 noch nicht (Hauptversion wurde gerade gestoßen).

Deinstallieren Sie node-sass

npm uninstall node-sass

Installieren Sie dann die neueste Version (vor 5.0)

npm install [email protected]

Hinweis: LibSass (daher auch Node-Sass) ist veraltet und Dart-Sass ist die empfohlene Implementierung. Sie können sassstattdessen eine Knotenverteilung von Dart-Sass verwenden, die zu reinem JavaScript kompiliert wurde. Seien Sie jedoch gewarnt:

Seien Sie vorsichtig mit diesem Ansatz. React-Skripte verwenden Sass-Loader v8, der Node-Sass gegenüber Sass bevorzugt (dessen Syntax von Node-Sass nicht unterstützt wird). Wenn beide installiert sind und der Benutzer mit sass gearbeitet hat, kann dies zu Fehlern bei der CSS-Kompilierung führen

Deinstallieren Sie node-sass

npm uninstall node-sass

benutze sass von:

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

Der einzige Grund, warum Sie einen solchen Fehler erhalten, ist, dass Ihre Knotenversion nicht mit Ihrer Node-Sass-Version kompatibel ist.

Lesen Sie daher die Dokumentation hier: https://www.npmjs.com/package/node-sass

Oder dieses Bild unten hilft Ihnen, welche Knotenversion die Node-Sass-Version verwenden kann.

Wenn Sie beispielsweise Node Version 12 unter Windows verwenden ("vielleicht"), müssen Sie die Node-Sass-Version 4.12 installieren .

npm install node-sass@4.12

Genau so. Jetzt müssen Sie nur noch die vom Node-Sass-Team empfohlene Node-Sass-Version mit den auf Ihrem Computer installierten Knoten installieren.

Wenn Sie CRA mit dem Standardpaketmanager yarnverwenden, gehen Sie wie folgt vor. Hat für mich gearbeitet.

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