babel-plugin-css-in-js icon indicating copy to clipboard operation
babel-plugin-css-in-js copied to clipboard

How are you preventing caching on bundle.css ?

Open criso opened this issue 8 years ago • 3 comments

criso avatar Jul 22 '16 16:07 criso

You can't currently. I'd be interested to hear your use case though.

martinandert avatar Jul 22 '16 23:07 martinandert

I'd like to be able to do something like: new ExtractTextPlugin('bundle-[name]-[contenthash].css'); Are you just serving the css file with "?v=1.1" ?

criso avatar Jul 25 '16 13:07 criso

During in woking on code, load your bundle.css in js code, like:

if( __DEVELOPMENT__ ) {   // this variable is injected by webpack.DefinePlugin
  require('./bundle.css');
}

in your webpack.config.dev.js, use style-loader to insert css into DOM, like:

module: {
  loaders: [{
    ...
    ...
  }, {
    test: /\.css$/,
    loader: 'style-loader!css-loader'
  }]
}

If you use HotModuleReplacementPlugin(), whenever you change cssInJS style, bundle.css will be regenerated, and then your browser will get the new bundle.css module, then re-render will occur without page refresh.

But if you don't want or can't use webpack, as you mention, the bundle.css?v=$(timestamp) and page refresh solution is also good!