title: SCSS not properly passing relative image references on import from different folder
body: <p>I'm developing a site using SCSS, and relative image paths aren't working properly when I import files. Here's what I mean:</p>
  
  <p><strong>Directory structure</strong></p>
  
  <pre><code>./
      css/
          main-code.scss
          common/
              include.scss
      images/
          image.jpg
  </code></pre>
  
  <p><strong>include.scss</strong></p>
  
  <pre><code>body {
      background-image: url('../../images/image.jpg');
  }
  </code></pre>
  
  <p><strong>main-code.scss</strong></p>
  
  <pre><code>@import("common/include.scss");
  </code></pre>
  
  <p>My include.scss file includes a proper relative reference to image.jpg. But when I import it into main-code.scss, which sits in a different directory, the link to the image is broken because it still appears as <code>url('../../images/image.jpg')</code> — which is no longer a valid reference to the image if we start up a folder in the directory structure.</p>
  
  <p>Is there any way to include a SCSS file and automatically adjust relative paths appropriately? Or do I need to put both of my SCSS files in one folder for this to function properly?</p>