search

gem-mine / webpack-css-themes-plugin

7 stars 2 forks source link

Hot reload functionality #6

Closed itayganor closed 4 years ago

itayganor commented 4 years ago

Hi :) I use the plugin in my app and it works great - thanks! But seems like it kills Hot reload.

I tried to add again "style-loader" as the first loader for my ".less" rule in webpack (and commented out the plugin from the plugins list), and the hot reload is working again.

When I say hot reloading I mean without refreshing the page at all. I have some components that fetch data on mount, so it's pretty clear when the components remounts because of a page reload.

Is there a way to fix this? Thanks! ❤️

githoniel commented 4 years ago

yes this plugin does not suppor hmr and need some work to fix it , i will fix it later

githoniel commented 4 years ago

@itayganor you need to set process.env.NODE_ENV = 'development' before devserver start and hmr will work.

I will document it in readme

itayganor commented 4 years ago

Which plugin is affected by the value of NODE_ENV?

itayganor commented 4 years ago

In addition, I couldn't find it doing anything different

githoniel commented 4 years ago

In addition, I couldn't find it doing anything different

this plugin will enable CSS reload when process.env.NODE_ENV = 'development'

since css is extract to a single css file it will alway do full css reload when css change

itayganor commented 4 years ago

In addition, I couldn't find it doing anything different

this plugin will enable CSS reload when process.env.NODE_ENV = 'development'

since css is extract to a single css file it will alway do full css reload when css change

If so, the page refreshes every time? It doesn't sound like a working hot reload :(

githoniel commented 4 years ago

In addition, I couldn't find it doing anything different

this plugin will enable CSS reload when process.env.NODE_ENV = 'development' since css is extract to a single css file it will alway do full css reload when css change

If so, the page refreshes every time? It doesn't sound like a working hot reload :(

not page refresh, just refresh css

webpack will reload css in unit of css chunk when css changes. while using this plugin will make all css in one chunk, so it will always reload all css.

itayganor commented 4 years ago

I couldn't make it work, both in my reproduction repo and in this library's test projects. Do you have a working example of hot reloading with this plugin?

githoniel commented 4 years ago
  1. pull the latest master branch and run yarn d
  2. you will see it print xxx in browser console
  3. editor test\e2e\hmr\src\theme\index.less, change #813851 to #113851
  4. we will see background change without xxx print again

image