Autoprefixer 导致 node-sass 源映射指向错误的文件

Question

我构建了一个自定义 Node 脚本，该脚本在 JS 中手动完成我的所有 SCSS 处理，而不是通过命令行或 webpack。

流程如下：

1. 观察 .scss 文件的变化。
2. 更改时，使用 node-sass 将 SCSS 编译为 CSS，同时使用 node-sass 生成源映射。
3. 使用`fs.writeFile() 写入screen.css 和screen.css.map 文件
4. 对于screen.css 文件，然后我使用fs.readFile 重新读取它以获取缓冲区，并使用autoprefixer 插件通过postcss 运行CSS 内容以自动为所有CSS 添加前缀。然后我再次使用fs.writeFile 重新编写它，最后使用jsftp 将其上传到服务器。同时，screen.css.map文件的处理过程也是完全一样的，只是我没有通过postcss运行，只是重新读取，初次写入后上传到服务器。李>

我的问题

如果我在使用postcss 时包含autoprefixer 插件，例如：

postcss([autoprefixer]).process(buffer, {
    from: "assets/css/screen.css",
    to: "assets/css/screen.css"
}).then(result => {...})

在浏览器中检查时源映射完全错误，不仅指向错误的行，还指向错误的文件。

例如，页面横幅的 SCSS 在 _banner.scss 中，但源映射告诉我它全部在 _calendar.scss 中。

但是，如果我保持所有代码完全相同但省略 autoprefixer，例如：

postcss([]).process(buffer, {
    from: "assets/css/screen.css",
    to: "assets/css/screen.css"
}).then(result => {...})

源图完美运行，正确地将我指向 _banner.scss 的所有横幅样式。

有没有人知道如何解决这个问题并让我的 SCSS 源图在仍然使用 autoprefixer 的同时正常工作？

在这里链接到 SCSS 处理节点脚本的完整源代码，忽略可怕的嵌套，这只是一个早期版本:) https://github.com/JJGerrish/twk-boilerplate/blob/master/template/style.js

Answer 1

对于任何需要它的人，我找到了解决方法。

基本上，postcss 可以选择检测以前的源映射并将其用于自己的源映射，而不是生成新的源映射。

我在 GitHub 问题上找到了这个解决方案，它对我有用，基本上，您必须获取 node-sass 生成的源映射，对其进行字符串化，然后将其传递给 postcss map 选项对象。

https://github.com/postcss/postcss/issues/222#issuecomment-318136962

incase 链接下方的代码消失：

postcss([autoprefixer])
    .process(result.css, {
        from: "assets/css/screen.css",
        to: "assets/css/screen.css",
        map: {
            prev: result.map.toString(),
            inline: false,
        },
    })
    .then(result => {...})