title: Relative img url issue in Sass file of Create React App generated app
body: <p>Here's my folder structure:</p>
  
  <pre><code>-- src
  ---- components
  ------ App.js
  ------ App.scss
  ---- img
  ------ icon-gear.png
  ---- styles
  ------ base.scss
  </code></pre>
  
  <p>Here are the relevant parts of my component (App.js):</p>
  
  <pre><code>import './App.scss';
  
  class App extends Component {
  </code></pre>
  
  <p>Here are the relevant parts of my Sass file (App.scss):</p>
  
  <pre><code>@import '../styles/base.scss';
  
  .App {
    .App-btnSettings {
      background-image: url('../img/icon-gear.png');
    }
  }
  </code></pre>
  
  <p>I can't for the life of me get that icon-gear image path right.</p>
  
  <p>When I use <code>../img/icon-gear.png</code> it bombs with:</p>
  
  <blockquote>
    <p>Module not found: Can't resolve '../img/icon-gear.png' in '/Users/rob/develop/openbazaar/openbazaar-web/src/styles/components'</p>
  </blockquote>
  
  <p>When I use <code>../../img/icon-gear.png</code> it bombs with:</p>
  
  <blockquote>
    <p>./src/components/App.scss... You attempted to import ../../img/icon-gear.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.</p>
  </blockquote>
  
  <p>What is the root path the image path should be relative to? I would think it's <code>src/components</code> because that's where this sass file is and that's also where I do the import (<code>@import '../styles/base.scss'</code>) at the top of the file from. But... that doesn't work (first error above).</p>
  
  <p>It also seems like there's a different base path between the two different error messages.</p>