Lỗi: Phiên bản Node Sass 5.0.0 không tương thích với ^ 4.0.0

Tôi đã tạo một dự án React trống, sử dụng lệnh: npx create-react-apptrên npm v7.0.7 và Node v15.0.1

Cài đặt:

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

Sau đó, tôi đã cố gắng nhập tệp .scss trống vào Thành phần ứng dụng:

App.js

import './App.scss'

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

export default App;

Ném lỗi:

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 sửa nó. Vấn đề là, bạn có thể không sử dụng nó như một phụ thuộc của dự án, mà là một phụ thuộc của các phụ thuộc của bạn. CRA sử dụng phiên bản cố định, angle-cli khóa vào node-sass v4, v.v.
Khuyến nghị bây giờ là: nếu bạn đang cài đặt chỉ cần kiểm tra node-sass bên dưới cách giải quyết (và lưu ý). Nếu bạn đang làm việc trên một dự án trống và bạn có thể quản lý cấu hình webpack của mình (không sử dụng CRA hoặc CLI để mở đầu cho dự án của bạn), hãy cài đặt trình tải sass-loader mới nhất.

Chỉnh sửa : lỗi này đến từ trình tải sass . Có sự không khớp về semver vì node-sass @latest là v5.0.0 và sass-loader mong đợi ^ 4.0.0.
Có một vấn đề mở trên kho lưu trữ của họ với một bản sửa lỗi liên quan cần được xem xét. Cho đến lúc đó, hãy tham khảo giải pháp bên dưới.

Cách giải quyết : không cài đặt node-sass 5.0.0 (phiên bản chính vừa mới được cập nhật).

Gỡ cài đặt node-sass

npm uninstall node-sass

Sau đó cài đặt phiên bản mới nhất (trước 5.0)

npm install node-sass@4.14.1

Lưu ý: LibSass (do đó cả node-sass) không được dùng nữa và dart-sass là cách triển khai được khuyến nghị. Thay vào đó , bạn có thể sử dụngsass , đây là một phân phối nút của dart-sass được biên dịch sang JavaScript thuần túy. Hãy cảnh báo mặc dù:

Hãy cẩn thận khi sử dụng cách tiếp cận này. React-scripts sử dụng sass-loader v8, ưu tiên node-sass hơn sass (có một số cú pháp không được node-sass hỗ trợ). Nếu cả hai đều được cài đặt và người dùng làm việc với sass, điều này có thể dẫn đến lỗi khi biên dịch css

Gỡ cài đặt node-sass

npm uninstall node-sass

sử dụng sass bằng cách:

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