Update sass-loader to v10.0.5 or newer for use node-sass v5.0.0

[RodrigoTomeES]

Describe the bug

create-react-app is using sass-loader: 8.0.2 in this version sass-loader does not allow to use node-sass higher versions, it has to be v4 only. So please update it. In sass-loader v10.0.5 is fixed.

webpack-contrib/sass-loader#898

https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

node-sass

Environment

Windows 10 Pro
npm v10.23.0
node-sass v5.0.0
react-scripts v4.0.1

Environment Info:

current version of create-react-app: 4.0.1
running from C:\Users\tomec\AppData\Roaming\npm-cache_npx\3252\node_modules\create-react-app

System:
OS: Windows 10 10.0.19042
CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
Binaries:
Node: 10.23.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.423.0), Chromium (87.0.664.66)
Internet Explorer: 11.0.19041.1
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: ^4.0.1 => 4.0.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. npx create-react-app hi
2. npm install node-sass
3. update files from css to sass
4. npm start

Expected behavior

SASS files should compile

Actual behavior

Reproducible demo

1. npx create-react-app hi
2. npm install node-sass
3. rename App.css to App.scss and Index.css to Index.sass
4. update in app.js App.css call to App.sass and in index.js Index.css to Index.sass
5. npm start

[junkaiii]

I noticed the version has already been bumped to 10.0.5 in the repo but when pulling the react-scripts package, the package.json still reflects the older version. Would someone release a patch version for the package?

[JsGvDev]

I don't recommend this solution, but in the meantime they will release a new patch for react-scripts, i did these steps after installing all node modules packages.

1. Check if sass-loader into node_modules is equal at 8.0.2, if equal follow next step, else and it is version 10.0.5 you don't have to do anything more
2. remove sass-loader folder from node_modules
3. Go to node_modules/react-scripts/package.json, and change "sass-loader" to "10.0.5"
4. Delete package-lock.json
5. Go to your terminal/console and run npm install

After this you should have a new folder node_modules/sass-loader with version 10.0.5, and it will solve the issue above

Node Sass version 5.0.0 is incompatible with ^4.0.0.

[MichielDeMey]

Should have been released with v4.0.2. 👍

[fakumax]

The only solution that I find to sass .
npm uninstall node-sass DEPRECATED
After that change in package.json : "react-scripts": "4.0.3"
Remove Folder node_modules.
npm install sass
👍

[RodrigoTomeES]

The only solution that I find to sass .
npm uninstall node-sass DEPRECATED
After that change in package.json : "react-scripts": "4.0.3"
Remove Folder node_modules.
npm install sass
👍

Thank you so much