Hata: Node Sass sürüm 5.0.0, ^ 4.0.0 ile uyumsuz

Şu komutu kullanarak boş bir React projesi oluşturdum: npx create-react-appnpm v7.0.7 ve Node v15.0.1'de

Kurulmuş:

• React v17.0.1,
• düğüm sass v5.0.0,

Sonra boş .scss dosyasını Uygulama bileşenine aktarmayı denedim:

App.js

import './App.scss'

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

export default App;

Bir Hata Atın:

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

Edit2 : sass-loader v10.0.5 bunu düzeltir. Sorun şu ki, onu bir proje bağımlılığı olarak değil, bağımlılıklarınızın bir bağımlılığı olarak kullanıyor olabilirsiniz. CRA sabit bir sürüm kullanır, köşeli kilitler düğüm sass v4'e vb.
Şimdilik öneri şudur: yalnızca geçici çözümün (ve notun) altındaki düğüm sass denetimini kuruyorsanız. Boş bir proje üzerinde çalışıyorsanız ve web paketi yapılandırmanızı yönetebiliyorsanız (projenizi inşa etmek için CRA veya CLI kullanmadan) en son sass-loader'ı yükleyin.

Düzenleme : Bu hata sass-loader'dan geliyor . Node-sass @latest v5.0.0 olduğundan ve sass-loader ^ 4.0.0 beklediğinden, bir semver uyuşmazlığı var.
Depolarında gözden geçirilmesi gereken ilişkili bir düzeltmeyle ilgili açık bir sorun var. O zamana kadar aşağıdaki çözüme bakın.

Çözüm : node-sass 5.0.0'ı henüz yüklemeyin (ana sürüm az önce çarpıldı).

Node-sass'ı kaldır

npm uninstall node-sass

Ardından en son sürümü yükleyin (5.0'dan önce)

npm install node-sass@4.14.1

Not: LibSass (dolayısıyla node-sass) kullanımdan kaldırılmıştır ve önerilen uygulama dart-sass'tır. Bunun sassyerine , saf JavaScript'e derlenmiş dart-sass'ın bir düğüm dağılımı olan kullanabilirsiniz. Yine de uyarın:

Bu yaklaşımı kullanırken dikkatli olun. React-scripts, sass yerine node-sass'ı tercih eden (node-sass tarafından desteklenmeyen bazı sözdizimlerine sahip) sass-loader v8 kullanır. Her ikisi de yüklüyse ve kullanıcı sass ile çalıştıysa, bu css derlemesinde hatalara neden olabilir

Node-sass'ı kaldır

npm uninstall node-sass

sass kullan :

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

Böyle bir hata almanızın tek nedeni, düğüm sürümünüzün düğüm-sass sürümünüzle uyumlu olmamasıdır.

Bu nedenle, buradaki belgeleri kontrol ettiğinizden emin olun: https://www.npmjs.com/package/node-sass

Ya da aşağıdaki bu resim size yardımcı olacaktır, düğüm sürümü node-sass sürümünü kullanabilir.

Örneğin, pencerelerinizde düğüm sürümü 12 kullanıyorsanız ("belki"), düğüm sass 4.12 sürümünü yüklemeniz gerekir .

npm install node-sass@4.12

Evet onun gibi. Yani şimdi sadece node-sass ekibi tarafından önerilen node-sass versiyonunu bilgisayarınıza kurulu node'larla kurmanız gerekiyor.

Varsayılan yarnpaket yöneticisiyle CRA kullanıyorsanız, aşağıdakileri kullanın. Benim için çalıştı.

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