webpack 将一些图像转换为 url 并将字符附加到其他图像答案

【问题标题】：webpack converts some images to urls and appends characters to otherswebpack 将一些图像转换为 url 并将字符附加到其他图像
【发布时间】：2016-07-15 15:36:23
【问题描述】：

我正在尝试将带有着色叠加层的平铺背景图像应用于我的项目。我在我的其他节点包中使用 webpack 和 node-sass、sass-loader、css-loader、file-loader 和 url-loader。

我有两个正在测试外观的背景图像，并在这两个图像之间切换，因为背景是我遇到问题的地方。

这里是sass：

body{
    background:
        linear-gradient(
            rgba($color4, .5),
            rgba($color4, .5)
        ),
        url('../assets/dark_fish_skin.png')
        // url('../assets/noisy_grid.png')
    ;
    background-repeat: repeat;
    color: $color2;
}

这里是 sass 文件、文件目录和我的 src 文件中的两个图像，只是为了提供整体上下文（编译输出发送到 public 文件夹）：

当我使用dark_fish_skin.png 作为背景图像运行 webpack 时，图像可以正常显示，因为它已转换为 base64 编码的 url：

当我切换到noisy_grid.png 图像并运行 webpack 时，图像作为常规图像通过，但在末尾附加了缓存破坏器（假设），文件被移动到公共目录但没有缓存buster 在名称中，我收到一个错误，因为 css 引用与图像名称不匹配：

（请原谅凌乱的公共目录，这仍然是一个 wip）。

我一直在查看文档，但找不到解决此问题的方法。

两个问题：为什么会发生这种情况（链接到文档中的解释会很棒）以及我将如何解决这个问题？

【问题讨论】：

标签： css image sass base64 webpack

【解决方案1】：

node-sass 不会转换 url 连接，除非您应用某种迭代。见http://www.sassmeister.com/gist/d6051eeb2f3bade7eb6d453158e3faf6 这可能是 webpack 做的事情

【讨论】：