title: Can't resolve .scss files in .jsx using import
body: <p>When I try to build my react app, I'm getting an error. </p>
  
  <p><code>webpack-dev-server --progress --inline --watch</code>.</p>
  
  <pre><code>ERROR in ./app/index.jsx
  Module not found: Error: Can't resolve 'styles/main' in '/Users/jono/dev/recipist/app'
   @ ./app/index.jsx 11:12-34
   @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.jsx
  </code></pre>
  
  <p>I am importing in <strong><a href="https://github.com/jonofan/recipist/blob/master/app/index.jsx" rel="nofollow noreferrer">index.jsx</a></strong> using <code>import style from 'styles/main';</code></p>
  
  <p>This is what my tree looks like:</p>
  
  <pre><code>.
  ├── app
  │   ├── index.jsx
  │   └── styles
  │       └── main.scss
  ├── index.html
  ├── output
  │   └── bundle.js
  ├── package.json
  └── webpack.config.js
  </code></pre>
  
  <p><strong>webpack.config.js</strong>: <a href="https://github.com/jonofan/recipist/blob/master/webpack.config.js" rel="nofollow noreferrer">https://github.com/jonofan/recipist/blob/master/webpack.config.js</a></p>
  
  <p>I have also tried referencing the full extension without using resolve extensions in the config, but same issue.</p>