时间戳

首页 > 解决方案 > Autoprefixer 导致 node-sass 源映射指向错误的文件

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

问题描述

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

过程如下：

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

我的问题

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

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

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

例如，页面横幅的 SCSS 是 in _banner.scss，但 sourcemap 告诉我它全部是 in _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

标签： javascriptnode.jssasssource-mapsautoprefixer

解决方案

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

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

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

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

万一链接下面的代码消失了：

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

推荐阅读