title: webpack reload styles without page refresh
body: <p>I use webpack and livereload plugin but when I change something in styles, page refresh but I don't want it.</p>
  
  <p>When I use gulp, I change anything in styles and save it and then css reload without page refresh.</p>
  
  <p>Why does not work like gulp on webpack?</p>
  
  <p>Codes are below</p>
  
  <blockquote>
    <p>webpack.config.js</p>
  </blockquote>
  
  <pre><code>const path = require("path");
  const CopyWebpackPlugin = require("copy-webpack-plugin");
  const WebpackNotifierPlugin = require("webpack-notifier");
  const webpack = require("webpack");
  const LiveReloadPlugin = require("webpack-livereload-plugin");
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const Dotenv = require('dotenv-webpack');
  
  module.exports = {
      entry: [
          "./resources/js/app.jsx",
          "./resources/scss/app.scss",
      ],
      devtool: "source-map",
      output: {
          path: path.resolve(__dirname, "public/assets"),
          filename: "js/app.js",
          publicPath: "/public/assets/"
      },
      module: {
          rules: [{
              test: /\.(js|jsx)$/,
              exclude: /node_modules/,
              use: {
                  loader: "babel-loader",
                  options: {
                      presets: ["env", "react", 'stage-2']
                  }
              }
          }, {
              test: /\.(scss)$/,
              loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader', "postcss-loader"])
          }]
      },
      resolve: {
          extensions: ["*", ".js", ".jsx"]
      },
      watch: true,
      plugins: [
          new CopyWebpackPlugin([{
              from: "node_modules/bootstrap/dist",
              to: "plugins/bootstrap"
          }, , {
              from: 'node_modules/font-awesome/css',
              to: 'plugins/font-awesome/css',
          }, {
              from: 'node_modules/font-awesome/fonts',
              to: 'plugins/font-awesome/fonts',
          }]),
          new WebpackNotifierPlugin({
              alwaysNotify: true
          }),
          new webpack.LoaderOptionsPlugin({
              debug: true
          }),
          new LiveReloadPlugin(),
          new ExtractTextPlugin({
              filename: 'css/app.css'
          }),
          new Dotenv({
              path: './.env',
              safe: true
          }),
          new webpack.EnvironmentPlugin(['NODE_ENV'])
      ],
      node: {
          fs: "empty"
      }
  };
  </code></pre>
  
  <blockquote>
    <p>package.json</p>
  </blockquote>
  
  <pre><code>"scripts": {
      "start": "webpack-dev-server --history-api-fallback --progress --colors",
      "dev": "cross-env NODE_ENV=development webpack --progress --color",
      "prod": "cross-env NODE_ENV=production webpack -p --progress --color"
    },
  </code></pre>
  
  <p>I use "npm run dev" command.
  Where is the problem ?</p>