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