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

这会产生一个半工作的内联源 map ，但是原始文件的链接不正确，因此在Chrome devtools中单击它们不会加载它们(似乎将它们作为相对链接处理，然后从css文件夹中引用)。我试图通过将--source-map-contents true选项添加到node-sass来解决此问题，但是我怀疑自动前缀修复程序会出错，因为它不喜欢dataUri的行长。

理想情况下，无论如何我还是希望输出一个单独的.map文件，但是将node-sass选项设置为--source-map css/app.css.map不会写任何东西，大概是因为只有css输出到stdout了。

Answer 1

用source-map和文件系统URL替换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的评论推荐的使用exorcist的新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"
}