Webpack [url/file-loader] is not resolving the Relative Path of URL
<p>I am facing a problem in Webpack regarding Relative Path. 
Let me try to explain the scenario : </p>

<p>I have 2 separate project in <strong>Workspace directory</strong> :</p>

<ol>
<li>Project-A [Bundling using Gulp] : <strong>Stable &amp; Working</strong></li>
<li>Project-B [Bundling using Webpack] : <strong>New project</strong></li>
</ol>

<p>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 <strong><em>Project A into Project B</em></strong>.</p>

<p><a href="https://i.stack.imgur.com/jMZh9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jMZh9.png" alt="enter image description here"></a></p>

<p>Now, if I am trying to import Project-A index.scss in Project-B index.scss as another partial [<em>Commenting out the Background Image URL Depency</em>], webpack is able to generate the required CSS output file.</p>

<pre><code>// Import Project A SCSS [Common Varibles, Classes, Styling etc] 
@import "../../../../Project_A/assets/stylesheets/index";
</code></pre>

<p>But as Project-A's index.scss is further referring background images from the respective Relative-Path, the webpack build is throwing error </p>

<blockquote>
  <p>'File / dir not found in XYZ/Project-B/Source/Stylesheets'.</p>
</blockquote>

<p>Exact Error Block : </p>

<blockquote>
  <p>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</p>
</blockquote>

<p>screenshot : 
<a href="https://i.stack.imgur.com/IfQv2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IfQv2.png" alt="**enter image description here**"></a></p>

<p>I am not able to understand, <strong>why Webpack is not able to resolve the Relative path of assets inside Project-A and still looking inside 'Project B'</strong>.</p>

<p>Here is the Code-Repo URL for the simulated issue : 
<a href="https://github.com/raviroshan/webpack-build-issue/tree/master/WorkSpace" rel="noreferrer">https://github.com/raviroshan/webpack-build-issue/tree/master/WorkSpace</a></p>

<p><strong>Steps to reproduce.</strong></p>

<ol>
<li>Download the Repo. </li>
<li>Browse inside Project_B folder, and do a NPM install. </li>
<li>Run 'webpack'. It would build correctly as Relative Image
URL code is commented out. </li>
<li>Now put back the commented line of code :  <a href="https://github.com/raviroshan/webpack-build-issue/blob/master/WorkSpace/Project_A/assets/stylesheets/index.scss#L27" rel="noreferrer">https://github.com/raviroshan/webpack-build-issue/blob/master/WorkSpace/Project_A/assets/stylesheets/index.scss#L27</a></li>
</ol>