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

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:

enter image description here

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

node.jssasscreate-react-appnode-sass


Solution 1:[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!

Solution 2:[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

Solution 3:[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:[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

Solution 5:[5]

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

Solution 6:[6]

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.

Solution 7:[7]

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.

Solution 8:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Babitha
Solution 2
Solution 3 Philippe Gerber
Solution 4 Siva Kannan
Solution 5
Solution 6 Devorein
Solution 7 Abdelrhman Arnos
Solution 8 engjames256

Related Questions