Version conflict error in ./src/styles/element-variables.scss: Node Sass version 9.0.0 is incompatible with ^4.0.0

Table of contents

1. Encountering problems

2. Reason for error reporting

3. Solution

---

1. Encountering problems

This problem occurred when running the project. At first, it was because there was no sass. After downloading sass using the command, this error was reported again.

 ERROR  Failed to compile with 1 error                                            10:03:17 ├F10: AM┤

 error  in ./src/styles/element-variables.scss

Syntax Error: Error: Node Sass version 9.0.0 is incompatible with ^4.0.0.


 @ ./src/styles/element-variables.scss 4:14-234 15:3-20:5 16:22-242
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.101:9527/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

2. Reason for error reporting

The reason for this problem is that you can see in the error report that our current sass version is 9.0.0, which is different from the 4.0.0 required in the project, which leads to conflicts. Then we must synchronize it or change it in the project. Sass version, or change the current Sass version to what the project requires. Here I choose to downgrade my sass to the 4.0.0 version required in the project

3. Solution

View the sass commands of the current project

npm list node-sass

1. Uninstall the originally installed sass

npm uninstall node-sass

2. Reinstall sass

npm i -D sass

Then just run the project