HMR for CSS

[renchap]

First of all, thanks a lot @gauravtiwari for your work on integrating the non-JS assets management!

As I am using HMR with React, I am trying to enable it for CSS to avoid CSS changes to reload the whole page. To achieve this, ExtractTextPlugin needs to be replaced by style-loader for development. Here are my changes to sass.js:

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { env } = require('../configuration.js')

const baseUse = [
  'css-loader',
  'postcss-loader',
  'sass-loader',
]

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: env.NODE_ENV !== 'development' ? ExtractTextPlugin.extract({ fallback: 'style-loader', use: baseUse }) : ['style-loader'].concat(baseUse),
}

This works fine but I need to change my stylesheet_pack_tag calls to not occur during development because the CSS files are now embedded into the JS packs when I am serving the assets using webpack-dev-server with HMR on, and the manifest file does not contain them.

Currently I am using

<%= stylesheet_pack_tag "application" unless Rails.env.development? %>

but I dont find this very elegant.

Do you have an idea on how to correctly handle this? I was thinking about either an asset_pack_exists?(name) method to check if the CSS file is present, or an option to the pack tag helpers, like stylesheet_pack_tag "application", only_if_exists: true.

Any other or better ideas?

[gauravtiwari]

No problem 😄

Ahh right I see. Did you checked this thread though? webpack-contrib/extract-text-webpack-plugin#30 and there is a PR too, but not merged - webpack-contrib/extract-text-webpack-plugin#457

You could also give this loader a try - https://github.com/shepherdwind/css-hot-loader and see if it works. As you see, there is a lot of gotchas involved so, I am not sure if its a good idea to add this check to core as this might change anytime.

[gauravtiwari]

#264 addresses this 👍

[bbenezech]

@renchap I use this:

module LayoutHelper
  def webpack_dev_server_present?
    Rails.env.development? && Net::HTTP.get(URI("http://localhost:8080")) ? true : false
  rescue Errno::ECONNREFUSED
    return false
  end
end

It does not try anything unless Rails.env.development? but allows you to include regular css file when WDS is down.

[gauravtiwari]

HMR has landed on master 🎉