Create-react-app SASS source maps not working

SASS source map fails to output on create-react-app 2 (reported bug), been trying to find a workaround to this while an official fix is being considered.

Another user suggested adding the below to scripts:

"scripts": {
    "build-css": "node-sass --source-map true --include-path ./src --include-path ./node_modules src/assets/sass -o public/css",
    "watch-css": "npm run build-css && node-sass --source-map true --include-path ./src --include-path ./node_modules src/assets/sass -o public/css --watch --recursive"

This does the trick but generating another CSS which would get picked up outside of webpack, also breaking CSS injection (hot loading).

This is how the CSS is being included (via import on the index.js file). Ideally this should remain as is.

import "styles/main.scss";

Below the package.json (react-scripts v2.1.1):

"scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "lint": "NODE_ENV=production eslint src --ext '.js,.jsx'",
        "lint-fix": "yarn lint --fix",
        "lint-check": "NODE_ENV=production eslint --print-config . | eslint-config-prettier-check",
        "prepare-mobile": "node prepare-mobile.js",
        "release-mobile": "node prepare-mobile-release.js",
        "postbuild": "yarn prepare-mobile",
        "precommit": "pretty-quick --staged"
    }

Is there any way to output the SASS source map other than the above approach and without having to eject webpack?


This solution could tentatively be oversimplified, but I had some of the same errors in regards to source mapping with my sass file in my react app.

The text on my sass file remained white and would not update the css file whenever I added content.

So, I renamed the file from App.sass to App.scss, and it started working.

For some reason, if you create a sass file inside the src folder of a react app, it will still trigger the response that creates a new .css and css.map file. At this point, it might SEEM like every thing is working, but it WILL NOT work unless you rename the file ***.scss, instead of ***.sass.

I'm guessing this will not solve most people's source mapping problems, but it may save someone some trouble if they've got a simple problem.