Popular posts

Hi James,

To make hot reloading of CSS work, CSS is not being extracted in the development build.

During development, after all of the scripts get loaded, CSS is loaded as BLOBs. That's why you are not able to get the styles working with JavaScript disabled.

For production, though, the CSS is extracted and a .css file is created, which is used in the HTML template. So you wouldn't face this problem in production.

You're correct in identifying that it has something to do with webpack builds. For the above differences have a look at webpack.config.prod.js and webpack.config.dev.js

./webpack.config.prod.js

...
module: {
    loaders: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?localIdentName=[hash:base64]&modules&importLoaders=1!postcss-loader'),
...

./webpack.config.dev.js

...
 module: {
    loaders: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
...