10

当将输出从一个管道传输到另一个时，是否可以使用 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 devtools 中单击它们不会加载它们（似乎它们被处理为相对链接，然后从 css 文件夹中引用）。我试图通过向--source-map-contents truenode-sass 添加选项来解决此问题，但随后 autoprefixer 出现错误，我怀疑是因为它不喜欢 dataUri 的行长。

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

4

1 回答 1

13

替换source-map为source-map-root和 文件系统 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 文件！

更新：

以下是 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"
}
于 2016-11-28T20:46:28.323 回答