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选项来修复此问题，但随后autoprefixer错误，我怀疑因为它不喜欢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文件，但仍然很好！

<强>更新

以下是使用驱魔人的新package.json，如RyanZim的评论所推荐：

"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脚本的源映射

1 个答案: