webpack-dev-server with hot reload reloading entire page with css changes

Question

[Edit] Github Test Repo Created for you to test!!

---

I have hot reloading without any problems, but it reloads the entire page whenever I make a single css change. I would like it to inject any css changes and ideally do similarly with react components unless a full reload is truly needed.

** I get the following console logs **

[WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
client?cd17:41 [WDS] App hot update...
dev-server.js:33 [HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:33
dev-server.js:34 [HMR] Error: Aborted because ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css is not accepted
Update propagation: ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css -> ./src/components/shared/userPages/userPages.css -> ./src/components/Signin/index.js -> ./src/routes.js -> ./src/index.js -> 0
    at hotApply (http://localhost:8080/dist/main.js:430:30)
    at hotUpdateDownloaded (http://localhost:8080/dist/main.js:283:13)
    at hotAddUpdateChunk (http://localhost:8080/dist/main.js:263:13)
    at webpackHotUpdateCallback (http://localhost:8080/dist/main.js:8:12)
    at http://localhost:8080/dist/0.75f9c418ba8b1fdc9ad0.hot-update.js:1:1

webpack config

/* eslint-disable */
const Config = require('webpack-config').default;
const webpack = require('webpack');
const DashboardPlugin = require('webpack-dashboard/plugin');
const {environment} = require('webpack-config');
const path = require('path');

environment.set('cssIdent', '[path]___[name]__[local]___[hash:base64:5]');

module.exports = new Config().extend('./webpack.base.config.js').merge({
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  devServer: {
    contentBase: [
      'demo/'
    ],
    hot: true,
    historyApiFallback: true,
    host: '0.0.0.0',
    publicPath: '/dist/'
  },
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist/'
  },
  devtool: 'inline-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        BABEL_ENV: JSON.stringify('development')
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new DashboardPlugin()
  ],
  cache: true
});

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { AppContainer } from 'react-hot-loader';
import { ConnectedRouter } from 'react-router-redux'
import injectTapEventPlugin from 'react-tap-event-plugin';
import nprogress from 'nprogress';
import store from './configureStore';
import Routes from './routes';
import './components/shared/main.css';
import createHashHistory from 'history/createHashHistory'
const history = createHashHistory({
  hashType: 'slash'
});

//Remove on screen tap delay
injectTapEventPlugin();

//Add progress bar
nprogress.configure({ minimum: 0.15, showSpinner: false, speed: 500 });

// Now you can dispatch navigation actions from anywhere!
// store.dispatch(push('/foo'))

ReactDOM.render(
  <AppContainer>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Routes/>
      </ConnectedRouter>
    </Provider>
  </AppContainer>,
  document.getElementById('app')
);

Store.js

import { createStore, applyMiddleware, compose } from 'redux'
import { createLogger } from 'redux-logger'
import { routerMiddleware } from 'react-router-redux'
import reducers from './reducers';

const configureStore = function (history, preloadedState = {}) {
  // Build the middleware for intercepting and dispatching navigation actions
  const middlewareHistory = routerMiddleware(history);

  const store = createStore(
    reducers,
    preloadedState,
    compose(
      applyMiddleware(createLogger(), middlewareHistory)
    )
  );

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./reducers', () => {
      const nextReducer = require('./reducers').default;

      store.replaceReducer(nextReducer);
    });
  }

  return store;
};

export default configureStore(history);

A random component

import React from 'react';
import { NavLink } from 'react-router-dom'
import store from '../../configureStore';

import userStyles from '../shared/userPages/userPages.css';

class SignIn extends React.Component {
  render(){
    return (
      <div className={userStyles.home}>
      </div>
    );
  }
}

export default SignIn;

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-0",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ],
  "env": {
    "development/client": {
      "plugins": [
        ["transform-runtime", {
          "helpers": false,
          "polyfill": false,
          "regenerator": true
        }]
      ]
    },
    "test": {
      "presets": ["es2015"],
      "plugins": [
        ["transform-runtime", {
          "helpers": false,
          "polyfill": false,
          "regenerator": true
        }]
      ]
    }
  }
}

Answer 1

you can use extract text webpack plugin for css hot reloading instead of whole page/module reloading. below is the guideline to know how to use https://github.com/webpack-contrib/extract-text-webpack-plugin https://www.npmjs.com/package/extract-text-webpack-plugin