New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hot reloading css #8

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

Comments

Projects
None yet
7 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

This comment has been minimized.

Show comment
Hide comment
@pocketjoso

pocketjoso Aug 23, 2015

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. :)

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

This comment has been minimized.

Show comment
Hide comment
@pocketjoso

pocketjoso Aug 23, 2015

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. :)

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

This comment has been minimized.

Show comment
Hide comment
@patrikholcak

patrikholcak Aug 23, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@fraserxu

fraserxu Aug 28, 2015

@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? :(

@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

This comment has been minimized.

Show comment
Hide comment
@fraserxu

fraserxu Aug 28, 2015

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>?

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

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Aug 28, 2015

Member

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)

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

This comment has been minimized.

Show comment
Hide comment
@fraserxu

fraserxu Aug 28, 2015

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)?

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

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Aug 28, 2015

Member

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} />
  }
}
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

This comment has been minimized.

Show comment
Hide comment
@fraserxu

fraserxu Aug 28, 2015

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! 👍

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

This comment has been minimized.

Show comment
Hide comment
@patrikholcak

patrikholcak Aug 28, 2015

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!

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 added a commit to weslleyaraujo/pokedux that referenced this issue Dec 22, 2015

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

@gadicc gadicc referenced this issue Apr 12, 2016

Closed

SSR problem #13

@EvHaus

This comment has been minimized.

Show comment
Hide comment
@EvHaus

EvHaus Apr 12, 2016

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

EvHaus commented Apr 12, 2016

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

This comment has been minimized.

Show comment
Hide comment
@IAMtheIAM

IAMtheIAM May 20, 2016

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

IAMtheIAM commented May 20, 2016

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

@sheerun

This comment has been minimized.

Show comment
Hide comment
@sheerun

sheerun Dec 9, 2017

You can use ExtractTextPlugin and https://github.com/sheerun/extracted-loader in development

sheerun commented Dec 9, 2017

You can use ExtractTextPlugin and https://github.com/sheerun/extracted-loader in development

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