Search code examples
webpackwebpack-2

img path in css error when building the application on webpack

My project work with css modules and url-loader from images. And on localhost all work fine. I import my styles from my components in react/

When i try build my app on webpack, i get error during the build css, like this from all images in my styles

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

If i use css-loader?url=false build work without errors, but react not connected and also dont have imgs

my loaders for images

{
    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"
  }

and my loader sass/css in build config

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']
});

and my file tree

enter image description here

How fix this?

Solution

  • I suppose that App.jsx is your entry point (or index.jsx, it doesn't change anything), so you should import or require your spinner.gif like this ./img/spinner.gif instead of ../img/spinner.gif.

    With the later, you go up a level in the file tree but img and App.jsx are at the same level.