Question

我已经阅读了几乎所有关于未加载CSS背景图片的帖子，并且我确信我有（又一个）特殊情况。

我已经设置了我的webpack配置（只是相关部分）：

   {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
          }
        ]
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'file-loader',
          }
        ]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'url-loader',
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "less-loader",
            options: {
              includePaths: [
                path.resolve(__dirname, "assets", "less")
              ]
            },
          }
        ],
        exclude: /node_modules/
      }

我的公共路径设置如下：

 output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
    publicPath: "public/"
  },

当我构建webpack文件时，一切都被移动到我的/public目录就好了，我的样式被正确地重写了。我甚至可以手动查找未在public目录中加载的图像。但是，这种风格很糟糕：

.section-intro {
    background: url(public/76d7fa525cc5b3d641b9f774b7a79c92.png) center center no-repeat;
    background-size: cover;
}

我想也许它没有被正确设置，但是在Chrome中徘徊在风格上似乎意味着它正在工作 - 它显示localhost:8080/public/76d7fa525cc5b3d641b9f774b7a79c92.png。

其他内容，例如字体似乎正确加载。但是，我注意到手动转到localhost:8080/public/76d7fa525cc5b3d641b9f774b7a79c92.png给了我404.我发现这很奇怪。

在我的快递服务器中，我有以下一行：

this.app.use(express.static(path.resolve(__dirname, "..", "public")));

应该允许我看图像，对吗？

我不确定这是在快递方面还是在webpack方面，但是它让我把头发拉了出来。我希望有人可以提供帮助。

谢谢！

Answer 1

我不想将此称为修复，因此我不会将自己的答案标记为正确，直到其他人可以确认。

但是，修改file-loader匹配器的url-loader更改为png。它，我不认为完全解决了这个问题。如果文件足够小，唯一的区别是url-loader可以传递数据URL。机会是我的图像足够小，使其成为一个＆＃34;修复＆＃34;，但如果我在我放一个更大的图像，我相信它会再次破裂。

我很乐意看到更完整的解决方案。

CSS背景图像未加载webpack

1 个答案: