css - Webpack CSS 背景图像不显示

Question

我在使用 webpack 时显示 css 背景图像时遇到问题。

我有以下 css 类:

.fb {
  display: block;
  width:30px;
  height: 30px;
  background-color: red;
  background-image: url('../images/icons/facebook.png');
}

用法(使用React所以className不是类):

<div className="fb"></div>

下面是我的“web_build”文件夹的图像，webpack 将我的所有文件捆绑到其中。突出显示的是罪魁祸首图像。

以下是我在 Chrome 开发工具的“网络”选项卡中看到的捆绑 SCSS 文件。 “Img”选项卡上没有显示任何图像文件。

.fb {
  display: block;
  width: 30px;
  height: 30px;
  background-color: red;
  background-image: url(1b725f86d1e04faadfad0cda2ac6ee89.png); 
}

我看到渲染的只是一个 30x30px 的红色方 block 。

注释:

• 如果我使用 <img> 直接引用图像标签，如图所示。
• 我正在使用 webpack-dev-server
• 我正在使用具有以下配置的 image-webpack-loader

{
    test: /\.(jpe?g|png|gif|svg|ttf|eot|svg|woff(2)?)$/i,
    loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  },

如果需要任何其他信息，请告诉我。

谢谢。

Answer 1

经过更多搜索后发现，在我的 CSS/SASS 捆绑中包含 sourceMap 会破坏 CSS 中的相对图像 URL。

解决方案:关闭源映射或指定完全限定的 publicPath URL。

以下内容对我有用。

publicPath: 'http://localhost:8080'

更多信息请点击这里 https://github.com/webpack/style-loader/issues/55