Node-SASS source maps not working with React-JS

user_4221433 0
Viewed 548

I am trying to use SASS with REACT

Dummy GITHUB : https://github.com/bansalvks/react-poc-collection/tree/master/scss-with-react

The problem I am facing is that the source maps are not working.

I am using node-sass-chokidar and using the following script to run the utility node-sass-chokidar --include-path ./node_modules/ ./src -o ./src --output-style=expanded --source-map=true --source-map-root=true --watch

As you can see in the screen shot below the file is not appearing

enter image description here

reactjs sass css html javascript
1 Answers

This work with create-react-app but you can try in your react setup

Try this:

From "Dummy" Github webpage I found this:

https://github.com/facebook/create-react-app/issues/5707

The following did work for me:

1.) open node_modules\react-scripts\config\webpack.config.js
2.) replace "isEnvProduction" with "isEnvDevelopment" for the css-loader, css-module loader, sass loader and sass module loader
(between lines 443 - 500)
3.) start development process with "npm start"

So simply, navigate to node_modules\react-scripts\config\webpack.config.js

Between lines 443-500 search for:

  • css-loader
  • css-module
  • loader
  • sass-loader
  • sass-module-loader

and replace isEnvProduction to isEnvDevelopment

https://user-images.githubusercontent.com/11925409/50423483-4b986900-0856-11e9-80bb-7f7f331e17fd.png

I have tried that and source maps now are working in chrome developer tools

user_98337630
Related