Create-react-app: Unable to debug css as create-react-app strips out sourcemap references.

Created on 20 Aug 2017  路  2Comments  路  Source: facebook/create-react-app

I have the latest of everything and have come some way to getting to grips with create-react-app, which is great but I am used to using developer tools to debug css, which I intend to use heavily with things like susy grid as my app develops.
Basically, I have installed node-sass-chokidar as explained here, to compile sass on the fly and have a nice setup, only to find that the index.html file is generated dynamically and each css file put inline into the head of this document, stripping out the sourcemap links so everything is shown inline in Developer tools.
As part of the scripts section in package.json, I have put the build-css and watch-css lines, to which I have added the sourcemap generation. This section currently looks like this:

"scripts": {
    "build-css": "node-sass-chokidar --source-map true --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

Could anyone help me to understand where the css is being stripped out and how to link to css files directly or hook up sourcemaps again?

Most helpful comment

I'm having similar issues and so far every post that I've read mentioned ejecting the configurations to get this working. I'm hoping there is a way to see generated sourcemap in dev w/o ejecting.

All 2 comments

I'm having similar issues and so far every post that I've read mentioned ejecting the configurations to get this working. I'm hoping there is a way to see generated sourcemap in dev w/o ejecting.

My understanding is first-class support for Sass would solve this so I'm merging this into https://github.com/facebookincubator/create-react-app/issues/2498.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jantimon picture jantimon  路  154Comments

gaearon picture gaearon  路  86Comments

Timer picture Timer  路  144Comments

ericvicenti picture ericvicenti  路  83Comments

ericdfields picture ericdfields  路  78Comments