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

这会产生一个半工作的内联源映射，但指向原始文件的链接不正确，因此在 Chrome 开发工具中单击它们不会加载它们（似乎它们被处理为相对链接，然后从 css 文件夹中引用）。我试图通过在 node-sass 中添加 --source-map-contents true 选项来解决此问题，但随后 autoprefixer 出错了，我怀疑是因为它不喜欢 dataUri 的行长。

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

Answer 1

用 source-map-root 和文件系统 URL 替换 source-map 似乎可以解决问题：

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