Hot reloading css #8

Closed
pocketjoso opened this Issue Aug 23, 2015 · 12 comments

Projects

None yet

6 participants

@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 pocketjoso closed this Aug 23, 2015
@pocketjoso pocketjoso reopened this Aug 23, 2015
@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. :)

@pocketjoso pocketjoso closed this Aug 23, 2015
@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
Member
sokra commented Aug 28, 2015

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
Member
sokra commented Aug 28, 2015

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!

@weslleyaraujo weslleyaraujo added a commit to weslleyaraujo/pokedux that referenced this issue Dec 22, 2015
@weslleyaraujo weslleyaraujo feat(css-modules): Configure hot reaload for css modules
I thought it would be cool to have an hot reload for fast development of
css modules.

Got the configuration from:
css-modules/webpack-demo#8
1a779bf
@EvNaverniouk

I'm able to get HMR working correctly with CSS Modules if I define the imports at the top of my module, but if I want to load the bundle separately, it doesn't work.

In my case I'm doing something like this:

require.ensure([], (require) => {
    const theme = require(`./../../themes/white.css`)
});

The CSS Module correctly loads on initial page load, but if I update white.css, I see the following behaviour:

  • The original white.css CSS code is removed from the page
  • The HMR module is loaded via XHR. The payload looks good, but
  • The new white.css CSS code is never injected into a <style> tag on the page
@IAMtheIAM
IAMtheIAM commented May 20, 2016 edited

Check out my post here to learn how to get CSS hot module replacement working with webpack, sass sourcemaps, and angular 2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment