HMR for CSS
renchap opened this issue ยท 4 comments
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?
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.
#264 addresses this ๐
@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.
HMR has landed on master ๐