Generating sourcemaps with npm scripts using node-sass and postcss autoprefixer

Question

Is it possible to generate fully working sourcemaps using node-sass and postcss autoprefixer when piping output from one to another? I currently have the following in package.json:

"scripts": {
    "sass": "node-sass sass/app.scss --source-map true --source-map-embed true",
    "postcss:autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' --map",
    "css": "npm run sass -s | npm run postcss:autoprefixer -s > css/app.css"
}

This produces a semi-working inline sourcemap, but the links to original files are incorrect, so clicking on them in Chrome devtools won't load them (it seems like they are processed as relative links and then referenced from the css folder). I tried to fix this by adding the --source-map-contents true option to node-sass, but then autoprefixer bugs out, I suspect because it doesn't like the line length of the dataUri.

Ideally I'd prefer to output a separate .map file anyway, but setting the node-sass option to --source-map css/app.css.map doesn't write anything out, presumably because only the css is output to stdout.

Locris

Answer 1

Replacing source-map with source-map-root and a filesystem URL seems to do the trick:

"scripts": {
    "sass": "node-sass sass/app.scss --source-map-root file://${PWD}/ --source-map-embed true",
    "postcss:autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' --map",
    "css": "npm run sass -s | npm run postcss:autoprefixer -s > css/app.css"
}

Would still be good to know if it was possible to output separate .map files though!

Update:

Below is the new package.json using exorcist as recommended by RyanZim's comment:

"scripts": {
    "sass": "node-sass sass/app.scss --source-map-root file://${PWD}/ --source-map-embed true",
    "postcss:autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' --map",
    "css": "npm run sass -s | npm run postcss:autoprefixer -s | exorcist css/app.css.map > css/app.css"
}

Locris

For separate map files, you could use github.com/thlorenz/exorcist. – Rooker

You could also have postcss do the file writing for you, and pass the map filename like this: postcss [...] --map <map filename> – Rooker

@Rooker I wanted to avoid outputting in the postcss task itself so I can continue to pipe commands elsewhere if necessary, but exorcist works perfectly, thanks! – Locris

Answer 2

Try:

sass input.scss:output.css

Quaggy