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

Question

我的项目使用 css 模块和来自图像的 url-loader。在本地主机上一切正常。我在 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"
  }

和我的加载程序 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。

对于后者，您在文件树中上升了一个级别，但 img 和 App.jsx 处于同一级别。

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

img path in css error when building the application on webpack

webpack

webpack-2