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

[cawa-93]

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]

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]

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]

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]

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]

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

[cbracco]

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]

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.