node-sassとpostcss autoprefixerを使用したnpmスクリプトによるソースマップの生成

Question

ノード出力とポストcss自動プレフィクサーを使用して出力を完全に生成することは可能ですか？私は現在、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" 
} 

これは、半働いインラインsourcemapを生成するが、元のファイルへのリンクが間違っているので、クロームデベロッパーツールでそれらをクリックすると、それらをロードしません（それはそうそれらは相対リンクとして処理され、次にcssフォルダから参照されるように）。私は--source-map-contents trueオプションをnode-sassに追加することでこれを修正しようとしましたが、autoprefixerのバグを修正しました。これは、dataUriの行の長さが気に入らないためです。

とにかく別の.mapファイルを出力することをお勧めしますが、node-sassオプションを--source-map css/app.css.mapに設定すると、何も書き込まれません。おそらくcssだけがstdoutに出力されるからです。

Answer 1

source-map-rootでsource-mapを交換し、ファイルシステムのURLがトリックを行うようだ：

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

はまだかかわらず、それが出力個別の.MAPファイルに可能であったかどうかを知ることが良いでしょう！

アップデート：以下

がエクソシストを使用して新しいpackage.jsonがRyanZimさんのコメントによって推奨されるよう：あなたが使用することができ、別のマップファイルの場合

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