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

Question

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

过程如下：

观察 .scss 文件的变化。
更改时，使用node-sass将SCSS编译为CSS，同时使用node-sass生成源映射。
使用 `fs.writeFile()

screen.css

screen.css.map

对于 screen.css 文件，然后我用 fs.readFile 重新读取它以获取缓冲区，并运行 CSS 内容通过 postcss使用 autoprefixer 插件自动为所有 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 => {...})

在浏览器中检查时，sourcemap 完全错误，不仅指向错误的行，而且指向错误的文件。

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

中

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

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

sourcemap 工作完美，为我正确指向所有横幅样式的 _banner.scss。

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

Link 到这里的 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

下面的代码以防 link 消失：

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

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

Autoprefixer is causing node-sass source map to point to the wrong files

javascript

sass

node.js

source-maps

autoprefixer