Skip to content

Unable to debug css as create-react-app strips out sourcemap references. #2983

Closed
@webegguk

Description

@webegguk

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions