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 :
As both the projects are using same Styling, so I wanted to reuse the SCSS files [consisting of standard variables, predefined layouts, modals, classes etc] of Project A into Project B.
Now, if I am trying to import Project-A index.scss in Project-B index.scss as another partial [Commenting out the Background Image URL Depency], webpack is able to generate the required CSS output file.
// Import Project A SCSS [Common Varibles, Classes, Styling etc]
@import "../../../../Project_A/assets/stylesheets/index";
But as Project-A's index.scss is further referring background images from the respective Relative-Path, the webpack build is throwing error
'File / dir not found in XYZ/Project-B/Source/Stylesheets'.
Exact Error Block :
ERROR in ./src/assets/stylesheets/index.scss Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'diWorkSpace\Project_B\src\assets\stylesheets
I am not able to understand, why Webpack is not able to resolve the Relative path of assets inside Project-A and still looking inside 'Project B'.
Here is the Code-Repo URL for the simulated issue : https://github.com/raviroshan/webpack-build-issue/tree/master/WorkSpace
Steps to reproduce.
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.