To import Sass files, you first need to install node-sass

Question

Running create-react-app, I get the error in my create-react-app application:

To import Sass files, you first need to install node-sass. Run npm install node-sass or yarn add node-sass inside your workspace.

I do have node-sass installed.

package.json:

  "devDependencies": {
    "node-sass": "^4.13.0"
  }

project node_modules folder:

I've uninstalled, reinstalled, updated, cleaned cache, etc. How do I fix?

Solution 1

what worked for me was that I uninstalled global node-sass and installed it in my current project directory

npm uninstall -g node-sass

npm install node-sass

make sure to stop npm start until after installation, if possible restart your system when installation is done

Solution 2

In my case I had the same problem even though node-sass was already installed in my project directory.

To import Sass files, you first need to install node-sass. Run npm
install node-sass or yarn add node-sass inside your workspace.

What I figured out is, my project was running on the react scripts installed globally, and there was an another version inside my local project directory. There was a conflict in getting the base path of 'node-sass'.

I uninstalled the local react-scripts and installed it again in the local project directory. Run,

npm uninstall react-scripts then
npm install react-scripts

That fixed my problem!

Solution 3

I had the same issue and setting the SASS_PATH environment variable fixed it for me.

For example if you use docker-compose.yml then add:

environment:
  - SASS_PATH=node_modules:src

Maybe someone else can explain why this was needed.

Solution 4

In my case below was my error,

./src/modules/TestListing/components/SurveyCard/index.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/modules/TestListing/components/SurveyCard/index.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.

The error was happening even though I had installed node-sass globally which was weird.

I figured react-scripts could not able to recognize node-sass in it's environment , Hence I have added node-sass dependency in globally installed react-scripts package

cd /usr/local/bin/node_modules/react-scripts
sudo npm install --unsafe-perm node-sass

In the above command I am actually installing node-sass to a react-script package which is a library, It could fix the issue in my case,

Becareful on the commands, Because I am dong --unsafe-perm, Read it before you do

---

View more solutions

Comments

[gregbast1994]

make sure to stop npm start until after installation - The only thing I had to do.