3

I am trying to build react app and I want to use scss to style my app.

Challenge is that even though I already installed node-sass, but I still get this error.

./src/styles/styles.scss (/usr/local/lib/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!/usr/local/lib/node_modules/react-scripts/node_modules/postcss-loader/src??postcss!/usr/local/lib/node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!/usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/styles/styles.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.
Require stack:
- /usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/getDefaultSassImplementation.js
- /usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/getSassImplementation.js
- /usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/index.js
- /usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js
- /usr/local/lib/node_modules/react-scripts/node_modules/loader-runner/lib/loadLoader.js
- /usr/local/lib/node_modules/react-scripts/node_modules/loader-runner/lib/LoaderRunner.js
- /usr/local/lib/node_modules/react-scripts/node_modules/webpack/lib/NormalModule.js
- /usr/local/lib/node_modules/react-scripts/node_modules/webpack/lib/NormalModuleFactory.js
- /usr/local/lib/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js
- /usr/local/lib/node_modules/react-scripts/node_modules/webpack/lib/webpack.js
- /usr/local/lib/node_modules/react-scripts/scripts/start.js

I also tried to delete node_modules and reinstalled node-sass but it didn't work. Any advice?

MwamiTovi
  • 2,425
  • 17
  • 25
AhmadKamal
  • 51
  • 1
  • 2

3 Answers3

3

This happens to me sometimes and seems like issue with npm. Try installing node-sass using yarn

yarn add node-sass
Zohaib Ijaz
  • 21,926
  • 7
  • 38
  • 60
2

I'm not going to answer this question directly!

But point to an important matter! node-sass is deprecated!

sass package is used now in react-scripts. And the whole sass compiler or pre-processor is followed in the Dart sass project!

sass package is a distribution of Dart sass!

You can check more details and illustration in the following answer:

https://stackoverflow.com/a/68327656/7668448

Mohamed Allal
  • 17,920
  • 5
  • 94
  • 97
1

This really seems like issue with npm (it happend not always), but if you already use npm to your project, it would be better to use:

npm cache clear --force

instead of relocating all dependencies on yarn.

Vitalii
  • 71
  • 5