使用node-sass和postcss autoprefixer生成带有npm脚本的源映射-Java 学习之路

当将输出从一个输出到另一个时，是否可以使用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 .

1 回答

用 source-map-root 替换 source-map 和文件系统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文件，仍然会很好！

Update:

下面是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"
}

回复于 2024-04-30T08:29:38+08:00

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

1 回答

相关问题