title: require is working jsx file but url() resolve is not wroking in sass file - webpack
body: <p>I am facing this strange issue with <strong>Webpack</strong>. After spending hours couldn't find solution.</p>
  
  <p>In my jsx file when I a try to set image source via this</p>
  
  <pre><code>let img = require('../../../img/imgN.png');
  </code></pre>
  
  <p>It is working perfectly but when I try to set the background image using scss via </p>
  
  <pre><code>$bg-img: url('../img/bg-img.png');
  </code></pre>
  
  <p>Image is not getting loading by webpack.</p>
  
  <p>This is my webpack file</p>
  
  <pre><code>module.exports = {
    devtool: 'source-map',
    entry: {
      main: [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './src/index.js'
      ]
    },
    output: {
      path: path.join(__dirname, 'public'),
      publicPath: '/public/',
      filename: 'bundle.js'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ],
    module: {
     loaders: [
        {
          test: /\.jsx?$/,
          include: path.join(__dirname, 'src'),
          loader: 'react-hot!babel'
        },
        {
          test: /\.scss$/,
          include: path.join(__dirname, 'sass'),
          loaders: ["style", "css?sourceMap", "sass?sourceMap"]
        },
        {
            test: /\.(png|jpg)$/,
            include: path.join(__dirname, 'img'),
            loader: 'url-loader?limit=30000'
       } // inline base64 URLs for &lt;=30k images, direct URLs for the rest
      ]
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    devServer: {
      historyApiFallback: true,
      contentBase: './'
    }
  }
  </code></pre>