使用 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 devtools 中单击它们不会加载它们（似乎它们被处理为相对链接和然后从 css 文件夹中引用）。我试图通过向 node-sass 添加 --source-map-contents true 选项来解决此问题，但随后自动前缀错误出现，我怀疑是因为它不喜欢 dataUri 的行长度。

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

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 评论推荐的新 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"
}

使用 node-sass 和 postcss autoprefixer 使用 npm 脚本生成源映射

Generating sourcemaps with npm scripts using node-sass and postcss autoprefixer

npm

node-sass

autoprefixer

postcss

npm-scripts