search

11ty / eleventy-base-blog

A starter repository for a blog web site using the Eleventy static site generator.
https://demo-base-blog.11ty.dev/
MIT License
1.25k stars 620 forks source link

Making changes to the CSS does not provoke a reboot of styles #128

Open cawa-93 opened 2 years ago

cawa-93 commented 2 years ago

I run 11ty by npm run serve. Every time I make any changes to the CSS, I can't see them. 11ty does not hot-reload changes, does not restart inself, does not passthrough Copy files from css to _site/css. I have to manually restart the developer server after each change to css/* file

zachleat commented 2 years ago

Could be a few things:

Did you make changes to the addPassthroughCopy entries in your config file? Did you rename your config file to a non-default filename? Is the correct config file being read?

grahamharper commented 1 year ago

I'm having the same issue and can reproduce on a fresh clone of the repo.

  1. Clone this repo
  2. npm install
  3. npx @11ty/eleventy --serve
  4. Modify index.css e.g. body { background: hotpink; }` and save the file

Console outputs [11ty] File changed: public/css/index.css and rebuilds all site pages but the page doesn't automatically reload with new styles. You must refresh the page to see the style changes.

Same on node 18 and 20.

patrickgrey commented 1 year ago

Same issue for me with minimal changes to starter. I'm on windows, Node 18.

I can see in dev tools that the cache busting link query string does change on save e.g. (?_11ty=169582224106) so the hotload trigger is working.

However, if I open the link in a new tab, the old version of the CSS file is being served. If I look in the _site folder, the CSS has been updated. Would this point towards server caching, part of the incremental feature?

I added --incremental but this had no effect. I have noticed that my HTML source code has a weird " -" character appended just after the body tag and before the CSS and reload-client script links. No idea if that is relevant 😬

darby3 commented 11 months ago

For what it's worth—and I'm maybe out of my depth—I'm seeing that (after I commented out the inline style output in base.njk in favor of the to the external bundle file) the bundler in the output html remains pointing to the originally created version of the bundle after I change the css file in public/css.

So like I make changes to the public/css file, I see _site/css/index.css change, but there's nothing happening in the _site/bundle folder.

Console says "11ty][21:22:01.071 UTC] CSS updated without page reload." according to reload-client.js, so it's noticing that index.css is updating, but.

cbracco commented 11 months ago

Can also replicate this issue the same way as @grahamharper. I’m on macOS 14.1.1, using Node 18.

cbracco commented 11 months ago

When I switched to just referencing the CSS file directly instead of using the bundle plugin, live reload works: 

<link rel="stylesheet" href="/css/index.css">
scottsweb commented 2 days ago

I have tested the base blog today using node v20.17.0 on Linux (Fedora 41) and the issue still exists as far as I can tell. Modifying the CSS file appears to trigger a build but the browser requires a manual refresh to see the change.

Using polling with Chokidar doesn't seem to improve things either.

I am testing a PR on my own starter in the hope to use eleventy-plugin-bundle too, but it also suffers from the same issue.

So this all points to eleventy-plugin-bundle I believe. I'll do some more testing and perhaps open an issue there.