ข้อผิดพลาด: Node Sass เวอร์ชัน 5.0.0 เข้ากันไม่ได้กับ ^ 4.0.0

ฉันได้สร้างโครงการ React เปล่าโดยใช้คำสั่ง: npx create-react-appบน npm v7.0.7 และ Node v15.0.1

ติดตั้ง:

• ตอบสนอง v17.0.1
• โหนด -sass v5.0.0

จากนั้นฉันพยายามนำเข้าไฟล์. scss เปล่าไปยังส่วนประกอบของแอพ:

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.

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; ดร

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

หรือถ้าใช้เส้นด้าย (ค่าเริ่มต้นใน CRA เวอร์ชันใหม่กว่า)

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

Edit2 : sass-loader v10.0.5แก้ไขได้ ปัญหาคือคุณอาจไม่ได้ใช้มันเป็นการพึ่งพาโปรเจ็กต์ แต่เป็นการพึ่งพาการพึ่งพาของคุณมากกว่า CRA ใช้เวอร์ชันคงที่ angular-cli ล็อคไปยัง node-sass v4 เป็นต้น
คำแนะนำสำหรับตอนนี้คือ: หากคุณกำลังติดตั้งการตรวจสอบ node-sass ด้านล่างวิธีแก้ปัญหาชั่วคราว (และหมายเหตุ) หากคุณกำลังทำงานกับโปรเจ็กต์เปล่าและคุณสามารถจัดการการกำหนดค่า webpack ของคุณ (ไม่ใช้ CRA หรือ CLI เพื่อนั่งร้านโปรเจ็กต์ของคุณ) ติดตั้ง sass-loader ล่าสุด

แก้ไข : ข้อผิดพลาดนี้มาจากเขื่อง-loader มี semver ไม่ตรงกันเนื่องจาก node-sass @latest คือ v5.0.0 และ sass-loader คาดว่า ^ 4.0.0
มีปัญหาที่เปิดอยู่ในที่เก็บของพวกเขาซึ่งมีการแก้ไขที่เกี่ยวข้องซึ่งต้องได้รับการตรวจสอบ ในระหว่างนี้โปรดดูวิธีแก้ไขปัญหาด้านล่าง

วิธีแก้ปัญหา : อย่าติดตั้ง node-sass 5.0.0 เลย (เวอร์ชันหลักเพิ่งถูกชน)

ถอนการติดตั้ง node-sass

npm uninstall node-sass

จากนั้นติดตั้งเวอร์ชันล่าสุด (ก่อน 5.0)

npm install node-sass@4.14.1

หมายเหตุ: LibSass (ด้วยเหตุนี้ node-sass เช่นกัน) จะเลิกใช้งานและ dart-sass คือการใช้งานที่แนะนำ คุณสามารถใช้sassแทนซึ่งเป็นการกระจายโหนดของ dart-sass ที่คอมไพล์เป็น JavaScript บริสุทธิ์ ขอเตือนว่า:

ใช้แนวทางนี้อย่างระมัดระวัง React-scripts ใช้ sass-loader v8 ซึ่งชอบ node-sass ถึง sass (ซึ่งมีไวยากรณ์บางตัวที่ node-sass ไม่รองรับ) หากติดตั้งทั้งสองอย่างและผู้ใช้ทำงานกับ sass อาจทำให้เกิดข้อผิดพลาดในการคอมไพล์ css

ถอนการติดตั้ง node-sass

npm uninstall node-sass

ใช้sassโดย:

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

สาเหตุเดียวที่ทำให้คุณได้รับข้อผิดพลาดเช่นนั้นเนื่องจากเวอร์ชันโหนดของคุณไม่เข้ากันกับเวอร์ชัน node-sass ของคุณ

ดังนั้นอย่าลืมตรวจสอบเอกสารที่นี่: https://www.npmjs.com/package/node-sass

หรือรูปภาพด้านล่างนี้จะช่วยคุณได้ว่าเวอร์ชันโหนดสามารถใช้เวอร์ชัน node-sass ได้อย่างไร

สำหรับตัวอย่างเช่นถ้าคุณกำลังใช้โหนดรุ่น 12ในหน้าต่างของคุณ ( "อาจจะ") แล้วคุณควรจะมีการติดตั้งรุ่นโหนดเขื่อง 4.12

npm install node-sass@4.12

ใช่อย่างนั้น ดังนั้นตอนนี้คุณจะต้องติดตั้งเวอร์ชัน node-sass ที่แนะนำโดยทีม node-sass พร้อมกับโหนดที่ติดตั้งบนคอมพิวเตอร์ของคุณ

หากคุณใช้ CRA กับyarnตัวจัดการแพ็คเกจเริ่มต้นให้ใช้สิ่งต่อไปนี้ ทำงานให้ฉัน

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

มันใช้งานได้สำหรับฉันหลังจากเพิ่มแพ็คเกจ node-sass เวอร์ชันเฉพาะ (node-sass@4.14.1)

ข้อผิดพลาดนี้เกิดขึ้นเมื่อเวอร์ชันของ NodeJS และ Node Sass ไม่ตรงกัน

คุณสามารถแก้ไขปัญหาของคุณได้โดยทำดังนี้:

- ขั้นตอนที่ 1 : ลบ Nodejs ออกจากคอมพิวเตอร์ของคุณ

- ขั้นตอนที่ 2 : ติดตั้ง Nodejs เวอร์ชัน 14.15.1 อีกครั้ง

- ขั้นตอนที่ 3 : ถอนการติดตั้ง Node sass โดยรันคำสั่งnpm uninstall node-sass

- ขั้นตอนที่ 4 : ติดตั้ง Node sass เวอร์ชัน 4.14.1 อีกครั้งโดยรันคำสั่งnpm install node-sass@4.14.1

หลังจากขั้นตอนทั้งหมดคุณสามารถเรียกใช้คำสั่งng serve -oเพื่อเรียกใช้แอปพลิเคชันของคุณ

Node sass เวอร์ชัน 5.0.0 เข้ากันไม่ได้กับ ^ 4.0.0

หากข้อผิดพลาดคือ

ข้อผิดพลาด: Node Sass เวอร์ชัน 5.0.0 เข้ากันไม่ได้กับ ^ 4.0.0

ขั้นตอนที่ 1: หยุดเซิร์ฟเวอร์

ขั้นตอนที่ 2: รันคำสั่งคือ npm uninstall node-sass

ขั้นตอนที่ 3: ตรวจสอบ node-sass package.jsonว่า node-sass มีอยู่ในไฟล์หรือไม่จากนั้นให้รัน Step2 อีกครั้ง

ขั้นตอนที่ 4: npm install node-sass@4.14.1<=== เรียกใช้คำสั่ง

ขั้นตอนที่ 5: รอจนกว่าคำสั่งจะทำงานสำเร็จ

ขั้นตอนที่ 6: เริ่มเซิร์ฟเวอร์โดยใช้ npm start