Webpack [url/file-loader] is not resolving the Relative Path of URL

Question

I am facing a problem in Webpack regarding Relative Path. Let me try to explain the scenario :

I have 2 separate project in Workspace directory :

Answer 1

So, finally after so much struggle, got a proper SOLUTION.

It turns out to be an issue with CSS-loader i.e it is not able to resolve the URL with respective to current file.

Using resolve-url-loader solved this problem. https://www.npmjs.com/package/resolve-url-loader

 // Old Loader Config in Webpack-entry
 loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader?sourceMap')

 // New [Fixed] Loader Config in Webpack-entry
 loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap')

Here is updated Code-Repo with solution : https://github.com/raviroshan/webpack-build-issue

Note : Don't omit -loader Your Webpack.config.js should always use the long-form of the loader name (i.e. the -loader suffix).

There is another package called resolve-url which Webpack can confuse with resolve-url-loader.