Description
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?