create-react-app sass sourcemaps not working

[mustafaabobakr]

Sass sourcemaps shows only on yarn build

Can we have sourcemaps enabled by default in development ! yarn start

Environment

Node: v11.1.0
yarn: v1.12.1
npm: v6.4.1
Chrome: v70

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[Syden10]

Any estimate for an official fix on this? Thanks.

[mustafaabobakr]

Any Updates on this ?
Is there a working workaround ?

[BenAttenborough]

I suspect the team isn't moving particularly fast on this (btw team you are doing an excellent job!), because the react approach favours component level styling over a sass approach. However if sass is being support then source maps probably should be too. I'd certainly find it useful!

[kuangthien]

Anybody have temporarily solution ? :(

[agairing]

The following did work for me:

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

[NotAmaan]

The following did work for me:

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

@agairing Those changes would be lost on every npm install so I would advice against ever editing anything inside node_modules

[agairing]

@NotAmaan Right. It's just intended as a temporary solution (if you need working source maps - like myself....).

[danieltodonnell]

bump.

[clubajax]

I tried the solution from @agairing - but the source maps all point to main.scss and not the individual scss files. So there is still something missing.

[edit] process.env.GENERATE_SOURCEMAP needed to be set to true.

[agairing]

I just saw, that there are also 2 more spots in the "webpack.config.js" configuration file where I did replace isEnvProduction with isEnvDevelopment: