Hot reloading css

[pocketjoso]

Hi, first of all thanks for the awesome work on css-modules! I'm trying it out now on a new personal project.

I want to achieve hot reloading of the css with css-modules, but I'm not quite sure what the right setup would be. Is this something you have played around with?

[pocketjoso]

Okay, got some help and got it working, but via removing use of ExtractTextPlugin, like this:

// webpack.config.js
  module: {
    {
        test: /\.css$/,
        loaders: [
          'style?singleton',
          'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss'
        ]
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  postcss: [
    autoprefixer()
  ]

Feel free to enlighten me if I'm missing out on some important benefit by using it this way. :)

[pocketjoso]

Okay, so I see that the composes syntax in css files requires the use of ExtractTextPlugin in the webpack config. That brings me back to square one - if you know how to get that setup working with hot reloading, I would love to know. :)
Ignore above, I was using the wrong syntax.

Back to wondering what I'm missing out on by not using ExtractTextPlugin then. :)

[patrikholcak]

ExtractTextPlugin extracts chunks from the bundle. It’s mostly used to separate css from the build. See this: https://github.com/css-modules/webpack-demo/blob/master/webpack.config.js#L36 and this: https://github.com/webpack/extract-text-webpack-plugin

It’s not needed for the hot reload functionality — it actually breaks hot reload if you keep it in your config. Kinda makes sense, as the CSS gets extracted from the reloaded bundle

[fraserxu]

@pocketjoso @patrikholcak For development hot-reload css is surely something we need, but adding ExtractTextPLugin seems break it. What's your solution for this?

I'm following the setup in the webpack-demo repo, once I did some change the CSS does not apply to the page until I refresh :(

edited: Should I switch back to inline-css? :(

[fraserxu]

Hi @pocketjoso Just noticed that if I remove ExtractTextPlugin, there will be no style applied to the HTML at all, it's not inlined..

Unless you change <header className={styles.header}></header> to <header style={styles.header}></header>?

[sokra]

ExtractTextPlugin is only for production. There is no hot-reloading with it. (applies to normal styles too)

CSS Modules behave a bit different to normal styles when hot updated. As they export something, they need to be accepted in the parent module. So you can either do in manually (with module.accept) or if using react combine it with the react-hot-loader. (cc @gaearon)

[fraserxu]

Thanks for the reply @sokra

Since CSS Modules are using the className={styles.something} to add style to a HTML tag, which means style is not inline(style={styles.somethigns}) anymore, but the page still needs to load the style from somewhere. The ExtractTextPlugin seems to be the only solution for this.

React-hot-loader will only work for inline style no?

Do you have any working example on how to run those two together with hot-reload(I'm already using react-hot-loader but it seems only work for JavaScript code and react inline style)?

[sokra]

means style is not inline(style={styles.somethigns}) anymore

This was never the case. You are propably confusing CSS Modules with CSS-in-JS.

In webpack the style-loader adds the CSS rules to the DOM. The ExtractTextPlugin is totally optional and only intended as production optimization. The style-loader behave equivalent (instagram.com is even using the style-loader in production instead of extracted CSS files).

So with react-hot-loader and style-loader!css-loader?modules you should get hot reloading working with:

import styles from "./file.css";

export default class MyComponent extends React.Component {
  render() {
    return <div className={styles.abc} />
  }
}

[fraserxu]

Thanks for the detail explanation! @sokra

I tried to to remove the ExtractTextPlugin before but seems I also need to remove the &importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5] from the loader query, it works well now! Thanks! 👍

[patrikholcak]

Hey @fraserxu

I usually have 2 webpack configs (dev and prod). Then I require the css in my app’s main.coffee (or js). I also have an npm production task, which just switches the config for the production one, that has the ExtractTextPlugin. The CSS then gets extracted so it can be linked in html.

I also need to remove the &importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]

Not sure about this one.

You’re more than welcome to copy anything from my configs. Hope it helps a bit!