Błąd: Node Sass w wersji 5.0.0 jest niezgodny z ^ 4.0.0

Utworzyłem pusty projekt React, używając polecenia: npx create-react-appna npm v7.0.7 i Node v15.0.1

Zainstalowano:

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

Następnie próbowałem zaimportować pusty plik .scss do komponentu aplikacji:

App.js

import './App.scss'

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

export default App;

Zgłoś błąd:

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 node-sass@4.14.1

Lub, jeśli używasz przędzy (domyślnie w nowszych wersjach CRA)

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

Edit2 : sass-loader v10.0.5 naprawia to. Problem polega na tym, że możesz nie używać go jako zależności projektu, ale bardziej jako zależności swoich zależności. CRA używa stałej wersji, blokuje kątowe cli do node-sass v4 i tak dalej.
Zalecenie na razie jest następujące: jeśli instalujesz tylko node-sass, sprawdź poniższe obejście (i uwagę). Jeśli pracujesz nad pustym projektem i możesz zarządzać konfiguracją swojego pakietu internetowego (nie używając CRA lub CLI do tworzenia szkieletu projektu), zainstaluj najnowszy program ładujący sass.

Edycja : ten błąd pochodzi z sass-loader . Występuje niezgodność semver, ponieważ node-sass @latest jest w wersji 5.0.0, a program ładujący sass oczekuje ^ 4.0.0.
W ich repozytorium jest otwarty problem z powiązaną poprawką, którą należy przejrzeć. Do tego czasu zapoznaj się z poniższym rozwiązaniem.

Obejście : nie instaluj jeszcze node-sass 5.0.0 (właśnie wpadła główna wersja).

Odinstaluj node-sass

npm uninstall node-sass

Następnie zainstaluj najnowszą wersję (przed 5.0)

npm install node-sass@4.14.1

Uwaga: LibSass (stąd również node-sass) jest przestarzały, a dart-sass jest zalecaną implementacją. Możesz sasszamiast tego użyć , która jest dystrybucją węzłów dart-sass skompilowaną do czystego JavaScript. Uważaj jednak:

Uważaj, stosując to podejście. React-scripts używa sass-loader v8, który preferuje node-sass od sass (który ma pewną składnię nieobsługiwaną przez node-sass). Jeśli oba są zainstalowane, a użytkownik pracował z sassem, może to prowadzić do błędów przy kompilacji css

Odinstaluj node-sass

npm uninstall node-sass

użyj sass przez:

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

Jedynym powodem, dla którego otrzymujesz taki błąd, jest to, że twoja wersja węzła nie jest kompatybilna z wersją node-sass.

Tak więc, sprawdź dokumentację tutaj: https://www.npmjs.com/package/node-sass

Lub poniższy obrazek pomoże ci, jaka wersja węzła może korzystać z wersji node-sass.

Na przykład, jeśli używasz węzła w wersji 12 w systemie Windows („być może”), powinieneś zainstalować wersję 4.12 node-sass .

npm install node-sass@4.12

Tak, właśnie tak. Teraz musisz tylko zainstalować wersję node-sass zalecaną przez zespół node-sass z węzłami zainstalowanymi na twoim komputerze.

Jeśli zdarzy ci się używać CRA z domyślnym yarnmenedżerem pakietów, użyj następującego. Pracował dla mnie.

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

U mnie zadziałało po dodaniu określonej wersji pakietu node-sass (node-sass@4.14.1)

Ten błąd występuje, gdy wersje NodeJS i Node Sass nie są dopasowane.

możesz rozwiązać problem, wykonując poniższe czynności:

- Krok 1 : Usuń Nodejs z komputera

- Krok 2 : Ponownie zainstaluj Nodejs w wersji 14.15.1.

- Krok 3 : Odinstaluj Node Sass, uruchamiając polecenienpm uninstall node-sass

- Krok 4 : Ponownie zainstaluj Node sass w wersji 4.14.1, uruchamiając polecenienpm install node-sass@4.14.1

Po wszystkich krokach możesz uruchomić polecenie, ng serve -oaby uruchomić aplikację.

Węzeł Sass w wersji 5.0.0 jest niezgodny z ^ 4.0.0.

Jeśli błąd to

Błąd: Node Sass w wersji 5.0.0 jest niezgodny z ^ 4.0.0

Krok 1: zatrzymaj serwer

Krok 2: uruchom polecenia są npm uninstall node-sass

Krok 3: sprawdź, package.jsonczy node-sass jest dostępny w pliku, a następnie ponownie uruchom Krok 2.

Krok 4: npm install node-sass@4.14.1<=== uruchom polecenie

Krok 5: poczekaj, aż polecenie zostanie pomyślnie uruchomione.

Krok 6: uruchom serwer za pomocą npm start