title: CSS styles disappear after refresh in React app
body: <p>I'm at a loss when it comes to figuring out why this is happening. Right now my hunch is that this is a Webpack issue. I don't have this refresh problem on the dev environment, but only when I build and run that code. </p>
  
  <p>Basically, when I'm on certain pages, and I refresh the app ... all the styles I have in a stylesheet are being ignored, and when I check the response it is actually just showing my index.html page.</p>
  
  <p><a href="https://i.stack.imgur.com/pcfVv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pcfVv.png" alt="Network Response"></a></p>
  
  <p>I am importing the styles into the root of my app, so in the index.js. I know it is still going through that on refresh cause that's where my persistedState logic is happening, and what allows the refresh to work.</p>
  
  <p>Here is my webpack config for production environment. I feel like that has to be the problem somewhat, since the dev environment is just fine. Unless I'm not thinking of other potential problems?</p>
  
  <pre><code>import webpack from 'webpack';
  import path from 'path';
  import ExtractTextPlugin from 'extract-text-webpack-plugin';
  
  const GLOBALS = {
    'process.env.NODE_ENV': JSON.stringify('production')
  };
  
  export default {
    debug: true,
    devtool: 'source-map',
    noInfo: false,
    entry: [
      './src/index'
    ],
    target: 'web',
    output: {
      path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
      publicPath: '/',
      filename: 'bundle.js'
    },
    devServer: {
      contentBase: './dist'
    },
    plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.DefinePlugin(GLOBALS),
      new ExtractTextPlugin('styles.css'),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin()
    ],
    module: {
      loaders: [
        {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
        {test: /(\.css)$/, loader: ExtractTextPlugin.extract("css?sourceMap")},
        {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
        {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&amp;limit=5000'},
        {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&amp;mimetype=application/octet-stream'},
        {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file"},
        {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&amp;mimetype=image/svg+xml'}
      ]
    }
  };
  </code></pre>
  
  <p>Would love anyones thoughts or solutions to this problem!</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here is the webpack dev config:</p>
  
  <pre><code>import webpack from 'webpack';
  import path from 'path';
  
  export default {
    debug: true,
    devtool: 'cheap-module-eval-source-map',
    noInfo: false,
    entry: [
      //'eventsource-polyfill', // necessary for hot reloading with IE
      'babel-polyfill',
      'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
      './src/index'
    ],
    target: 'web',
    output: {
      path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
      publicPath: '/',
      filename: 'bundle.js'
    },
    devServer: {
      contentBase: './src'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ],
    module: {
      loaders: [
        {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
        {test: /(\.css)$/, loaders: ['style', 'css']},
        {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file"},
        {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
        {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&amp;limit=5000'},
        {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&amp;mimetype=application/octet-stream'},
        {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&amp;mimetype=image/svg+xml'}
      ]
    }
  
  };
  </code></pre>
  
  <p>Head tag of HTML:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"&gt;
      &lt;link rel="shortcut icon" href="favicon.ico"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700|Roboto:300,400,900" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500|Work+Sans:300,400,500" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" /&gt;
    &lt;/head&gt;
  </code></pre>