使用 node-sass 和 postcss autoprefixer 使用 npm 脚本生成源映射 [英] Generating sourcemaps with npm scripts using node-sass and postcss autoprefixer

问题描述

在将输出从一个管道传输到另一个时，是否可以使用 node-sass 和 postcss autoprefixer 生成完全工作的源映射?我目前在 package.json 中有以下内容:

Is it possible to generate fully working sourcemaps using node-sass and postcss autoprefixer when piping output from one to another? I currently have the following in 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 选项来解决这个问题，但随后 autoprefixer 出错了，我怀疑是因为它不喜欢 dataUri 的行长.

This produces a semi-working inline sourcemap, but the links to original files are incorrect, so clicking on them in Chrome devtools won't load them (it seems like they are processed as relative links and then referenced from the css folder). I tried to fix this by adding the --source-map-contents true option to node-sass, but then autoprefixer bugs out, I suspect because it doesn't like the line length of the dataUri.

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

Ideally I'd prefer to output a separate .map file anyway, but setting the node-sass option to --source-map css/app.css.map doesn't write anything out, presumably because only the css is output to stdout.

推荐答案

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

Replacing source-map with source-map-root and a filesystem URL seems to do the trick:

"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 文件！

Would still be good to know if it was possible to output separate .map files though!

更新:

以下是 RyanZim 评论推荐的使用 exorcist 的新 package.json:

Below is the new package.json using exorcist as recommended by RyanZim's comment:

"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 脚本生成源映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！