search

Elderjs / template

Elder.js template project. It is part template, part tutorial. Dive in!
https://elderjs.pages.dev/
MIT License
113 stars 33 forks source link

CSS changes are not reflected in dev mode #38

Closed angelgarpi closed 3 years ago

angelgarpi commented 3 years ago

Hello,

First of all, thanks for this awesome solution, I am giving it a try and it is exactly what I need for my blog.

I found an issue that enforces me to re-run npm run dev:rollup when I introduce a new css change.

Steps to reproduce:

  1. Clone the template
  2. Open two terminals for development purpose (npm run dev:server and npm run dev:rollup)
  3. Go to Home.svelte and add/modify any css definition, for example: modify background for .banner from #eee to blue.

CSS change is not reflected in localhost, need to restart the npm run dev:rollup process to see it. Found that __ELDER__ assets and public assets do not match.

Tested in both Windows and WSL: Ubuntu 20.04. Node 12 and 14. Npm 6.x

wooolfgang commented 3 years ago

Yep, this is an issue that I'm having as well. Using the current template here without any new configurations, and the style changes made with Svelte's inline-styles does not trigger an update. You would have to rerun yarn dev:rollup in order to see the new changes. This is a major blocker in development.

Is there any code that I can look into that might be causing this @nickreese ?

nickreese commented 3 years ago

@wooolfgang @Agedjus This is a bug in the caching system in rollupPlugin.ts more details here: https://github.com/Elderjs/elderjs/issues/114

Haven't had time to dive into it. Would gladly accept help in figuring it out. Been dealing with some health issues that have been getting the focus as of late.

nickreese commented 3 years ago

@wooolfgang @Agedjus fixed in latest release.

angelgarpi commented 3 years ago

Sorry for comment again on this issue but I think it is not completely fixed. Now if you change a value it is updated and reflected as expected but if the value comes back to the initial value, it breaks again.

Steps are similar:

  1. Clone the template
  2. Open two terminals for development purpose (npm run dev:server and npm run dev:rollup)
  3. Go to Home.svelte and modify background for .banner from #eee to blue. It is reflected.
  4. Modify back to the initial value #eee, not reflected, broken.

Thanks for the effort, this project and template are awesome. The issue has much less impact than the previous so far.