在webpack上构建应用程序时出现css错误的img路径

Question

我的项目使用css模块和来自图像的url-loader。 在localhost上一切正常。 我从react /

中的组件导入我的样式

当我尝试在webpack上构建我的应用程序时，我在构建css期间遇到错误，就像这样 从我的风格中的所有图像

Module not found: Error: Can't resolve '../img/spinner.gif'

如果我使用css-loader?url=false构建工作没有错误，但反应没有连接，也没有imgs

我的图片加载器

{
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    exclude: /(node_modules|bower_components)/,
    loader: "url-loader?limit=10000&mimetype=image/svg+xml"
  },
  {
    test: /\.gif/,
    exclude: /(node_modules|bower_components)/,
    loader: "url-loader?limit=10000&mimetype=image/gif"
  },
  {
    test: /\.jpg/,
    exclude: /(node_modules|bower_components)/,
    loader: "url-loader?limit=10000&mimetype=image/jpg"
  },
  {
    test: /\.png/,
    exclude: /(node_modules|bower_components)/,
    loader: "url-loader?limit=10000&mimetype=image/png"
  }

和build config中的loader sass / css

loaders.push({
  test: /\.sass$/,
  loader: ExtractTextPlugin.extract({fallback: 'style-loader', use : 'css-loader?sourceMap&localIdentName=[local]___[hash:base64:5]!sass-loader?outputStyle=expanded'}),
  exclude: ['node_modules']
});

和我的文件树

如何解决这个问题？

Answer 1

我认为App.jsx是您的入口点（或index.jsx，它不会改变任何内容），因此您应该导入或要求spinner.gif这样的./img/spinner.gif ../img/spinner.gif而不是Desktop Qt 5.7.1 MSVC2013 64bit。

使用后者，你在文件树中上升一级，但img和App.jsx处于同一级别。