Erstellen von Quellkarten mit Npm-Skripten mit Node-Sass und Postcss Autoprefixer

Question

Ist es möglich, voll funktionsfähige Quellkarten mit Node-Sass und Postcss Autoprefixer zu erzeugen, wenn die Ausgabe von einem zum anderen Rohrleitung? Im Moment habe ich folgend 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" 
} 

Dies erzeugt einen halbArbeits Inline sourcemap, aber die Links zu Originaldateien sind falsch, so auf sich in Chrome devtools wird sie nicht geladen werden (es scheint wie sie als relative Links verarbeitet werden und dann aus dem css-Ordner referenziert werden). Ich habe versucht, dies zu beheben, indem ich die Option --source-map-contents true zu Node-Sass hinzufügen, aber dann Autoprefixer Bugs aus, ich vermute, weil es nicht die Leitungslänge der DataUri mag.

Idealerweise würde ich sowieso lieber eine separate .map-Datei ausgeben, aber das Setzen der Option node-sass auf --source-map css/app.css.map schreibt nichts aus, vermutlich weil nur die CSS in stdout ausgegeben wird.

Answer 1

Ersetzen source-map mit source-map-root und einem Dateisystem URL scheint den Trick zu tun:

"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" 
} 

noch gut wäre, zu wissen, ob es aber zur Ausgabe von separaten .map Dateien möglich war!

Update:

Im Folgenden wird die neue package.json Exorzist mit wie RyanZim Kommentar zu empfehlen:

"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" 
}