Node-SASS 源映射不适用于 React-JS

Question

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

Answer 1

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