title: background-image URL not loading using Webpack
body: <p>Basically I am trying to have an image display in the background of a container, but it isn't loading. I have tried various paths as it isn't entirely clear to me what the URL needs to be relative to: the <code>package.json</code>, the <code>webpack.config.js</code>, the React component, or the <code>login.scss</code> I am working in.</p>
  
  <p>I'll provide the directory structure in addition to the <code>webpack.config.js</code>:</p>
  
  <pre><code>/app
      /src
          /assets
              /img
                  slide_blue.png
              /scss
                  login.scss
          /config
              webpack.config.js
          /react
              /containers
                  /authentication
                      signin.js
              index.js // entry point
      package.json
  </code></pre>
  
  <p>The <code>login.scss</code> is short thus far and the other styles are working:</p>
  
  <pre><code>// logic.scss
  @import 'declarations';
  
  .login {
      height: 381px;
      // tried just about every combination of path... this is just the last one I tried
      background-image: url('/src/assets/img/slide_blue.png') !important;
  
      form {
          padding-top: 75px;
          padding-bottom: -75px;
      }
  }
  </code></pre>
  
  <p>And then finally the <code>webpack.config.js</code>:</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var BundleTracker = require('webpack-bundle-tracker');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  const VENDOR_LIBS = [
    'axios', 'history', 'lodash', 'prop-types', 'react', 'react-dom', 'react-dropzone', 'react-redux', 'react-router-dom', 'react-router-redux', 'redux', 'redux-form', 'redux-thunk', 'reactstrap'
  ]
  
  module.exports = {
    context: __dirname,
  
    entry: {
      app: '../react/index',
      vendor: VENDOR_LIBS
    },
  
    output: {
        path: path.resolve('./src/assets/bundles/'),
        filename: './js/[name].[chunkhash].js'
    },
  
    module: {
      rules: [
        { 
          loader: 'babel-loader',
          test: /\.js$/, 
          exclude: /node_modules/, 
          query: {
            presets: ["react", "es2015", "stage-1"]
          }
        },
        {
          test: /\.json$/,
          loader: ['json-loader'] 
        },
        {
          test: /\.scss$/,
          loader: ['style-loader', 'css-loader', 'sass-loader'] 
        },
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
          })      
        },   
      ],
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest']
      }),
      new BundleTracker({filename: './src/config/webpack-stats.json'}),
      new ExtractTextPlugin({filename: './css/[name].[hash].css', allChunks: true})
    ],
    resolve: {
      extensions: ['*', '.js', '.jsx', '.json', '.gif', '.png'],
    },
  }
  </code></pre>
  
  <p>What am I missing here that is preventing the <code>background-image: url(...)</code> from displaying?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The React component just in case:</p>
  
  <pre><code>    return (
          &lt;div className='login'&gt;
              &lt;form onSubmit={handleSubmit(this.onSubmit.bind(this))}&gt;
                  {this.renderAlert()}
                  &lt;Field 
                      label='Username'
                      name='username'
                      type='username'
                      component={this.renderField} 
                  /&gt;
                  &lt;Field 
                      label='Password' 
                      name='password'
                      type='password' 
                      component={this.renderField} 
                  /&gt;
                  &lt;div className='row'&gt;
                      &lt;div className='col-sm-2'&gt;
                          &lt;button type='submit' className='btn btn-primary'&gt;Sign in&lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div className='col-sm-10 pull-right'&gt;
                          &lt;ul className='pull-right signin'&gt;
                              &lt;li&gt;&lt;Link to='/auth/username'&gt;Username Recovery&lt;/Link&gt;&lt;/li&gt;                
                              &lt;li&gt;&lt;Link to='/auth/password'&gt;Password Reset&lt;/Link&gt;&lt;/li&gt;                                
                              &lt;br /&gt;
                              &lt;li&gt;&lt;Link to='/auth/new_account'&gt;New Accounts&lt;/Link&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      );
  </code></pre>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>I added the following to <code>webpack.config.json</code>:</p>
  
  <pre><code>  {
      test: /\.png|jpg$/,
      include: path.join(__dirname, 'assets/img'),
      loader: ['file-loader'] 
    },
  </code></pre>
  
  <p>And updated the <code>background-image: url(...)</code> to be relative to my entry point <code>index.js</code>:</p>
  
  <pre><code>background-image: url('/../assets/img/slide_blue.png');
  </code></pre>
  
  <p>Doesn't produce an error and doesn't load the image.</p>
  
  <p>Tried the following and it produces the corresponding error:</p>
  
  <pre><code>background-image: url('../assets/img/slide_blue.png');
  Module not found: Error: Can't resolve '../assets/img/slide_blue.png' in '/mnt/c/dev/current/app/src/assets/scss'
  </code></pre>
  
  <p>Also gave this a shot which produces the corresponding error:</p>
  
  <pre><code>background-image: url('../../assets/img/slide_blue.png');
  Module parse failed: Unexpected character '�' (1:0)
  You may need an appropriate loader to handle this file type.
  </code></pre>
  
  <p>So still not sure what is up. I have been loading images into my components doing the following, which has me questioning if it is even right (but that is another question):</p>
  
  <pre><code>import logo from '!!url-loader!../../../assets/img/logo.png';
  </code></pre>