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?

Cabby

it should be on the dependencies and not on the devDependencies I think – Suspect

@Suspect - I have other projects setup this way and it works – Cabby

Are you calling node-sass from your package.json when you run your build? eg: "build": "node-sass --other build steps" – Eton

I am forking create-react-app, and was running npx create-react-app --scripts-version file:../my-local/react-scripts. Then I would get this error in the created app. I then published the react scripts to npm and ran it that way and no longer get this error. don't understand that – Cabby

Same problem here. Are you using Yarn workspaces by any chance? – Voluptuary

@Voluptuary - I am not – Cabby

Answer 1

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!

Kremenchug

Reinstalling react-scripts helped! Thank you. – Scapula

Answer 2

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

Keeping

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

Answer 3

node-sass is deprecated, use sass instead. But sass loader expects node-sass. No problem, we can install sass and trick sass-loader that sass is a node-sass

Install sass

npm install sass@^1.55.0 --save

In your package.json file, replace sass entry with this. We can use alias names in package json

node-sass": "npm:sass@^1.55.0

example

"dependencies": {
        "axios": "^0.18.1",
        "moment": "^2.29.3",
        "node-sass": "npm:sass@^1.55.0",
        ...

works like a charm.

Lepley

For some reason this solution is not working for me. I've just install sass and loader require node-sass. Can you have other solution for that? – Spirogyra

Answer 4

node-sass has been deprecated. Please install sass or dart sass to fix your issues.

Missis

Does create-react-app need to update their docs create-react-app.dev/docs/adding-a-sass-stylesheet – Cabby

Looks like they did. I tried to convert to sass, but now I'm getting an error on npm start that I need to install node-sass. – War

@J.Gwinner, I've run into the same issue as well. What I did was uninstall and install react-scripts. – Kinsler

Answer 5

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.

Sneaker

Answer 6

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

---

Give

Answer 7

Actually what worked for me was creating a new folder, creating a react app from there and transferring all the codes to that new folder. Not sure why the problem occurred in the first place.

Snare

Answer 8

I had this same problem and I noticed that npm install node-sass was breaking before full installation. I also tried npm uninstall -g node-sass which wasn't adding the package to the package.json file. What worked for me is npm install node-sass --save which installed node--sass and added it as a dev dependency to my package.json file

Plumley

Answer 9

I had the same issue and I figured out it by installing sass moduele.

npm install sass

or

yarn add sass

Instability

Answer 10

Generally, you should install node-sass:

npm install node-sass --save
# or
yarn add node-sass

How to import

@import 'styles/_colors.scss'; // assuming a styles directory under src/
@import '~nprogress/nprogress'; // importing a css file from the nprogress node module

Sass path variable

To use imports relative to a path you specify, and from node_modules without adding the ~ prefix, you can add a .env file at the project root with the variable SASS_PATH=node_modules:src. To specify more directories you can add them to SASS_PATH separated by a : like path1:path2:path3.

Ropedancer