F
F
fierfoxik2017-10-27 23:24:45
webpack
fierfoxik, 2017-10-27 23:24:45

How to fix image path error when building webpack?

The project works on css modules and url-loader for image paths. I do import for my styles in react components. On localhost everything works fine, but when I start building the project, I get an error when building css. A similar error crashes for all pictures in my styles

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

my loaders for pictures:
{
    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 for 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 the structure of the project
PhkSK.png

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question