webpack HMR not loading css

Question

A simple webpack configuration but not working :

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
    plugins: [
    new HtmlWebpackPlugin({
        hash: true,
        filename: 'index.html',
        title: 'My Awesome application',
        myPageHeader: 'Hello World',
        template: './src/index.html',
      })
    ],
    devServer: {
      port: 8000,
      hot: true
    },

};

When I run with "hot : false" it works, my CSS is loaded, but with "hot: true" I can see my html but the style is not loaded...

"webpack": "^4.16.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"

If I build with webpack and then open dist/index.html in my browser, it works too.

In index.js I imported my css like that :

import './styles/app.css';

~

score 3 · Answer 1 · answered Jul 11 '18 at 20:48

3

I removed hot: true and added --hot option to my script, the command line version auto add a plugin.

answered Jul 11 '18 at 20:48

freezix

83
4

2

It feels a bit odd that within the past 16 months we are seemingly the only two people to have faced this issue – ESR Nov 24 '19 at 05:50
1

hey guys reporting in as the third – Dave Ankin Sep 24 '20 at 00:50

webpack HMR not loading css

1 Answers1