使用node-sass和postcss autoprefixer生成帶有npm腳本的源代碼圖

Question

當從一個管道輸出到另一個管道輸出時，是否可以使用node-sass和postcss autoprefixer生成完全有效的源映射？我目前在的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，但鏈接，原始文件是不正確的，那麼點擊它們在Chrome devtools不會加載它們（這似乎就像他們被處理爲相對鏈接，然後從css文件夾中引用）。我試圖通過向node-sass添加--source-map-contents true選項來解決此問題，但隨後autoprefixer錯誤地出現，我懷疑它是因爲它不喜歡dataUri的行長度。

理想情況下，我寧願輸出單獨的.map文件，但將node-sass選項設置爲--source-map css/app.css.map不會寫出任何內容，大概是因爲只有css輸出到stdout。

Answer 1

更換source-map與source-map-root和文件系統的網址似乎這樣的伎倆：

"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文件，但！

更新：

下面是所推薦的RyanZim的評論使用驅魔新的package.json：

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