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

Question

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

cawa-93 opened this issue 2 years ago · comments

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

Zach Leatherman · Answer 1 · Thu Jun 30 2022 00:27:28 GMT+0800 (China Standard Time)

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?

Graham Harper · Answer 2 · Tue Sep 12 2023 08:35:33 GMT+0800 (China Standard Time)

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

Clone this repo
npm install
npx @11ty/eleventy --serve
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.

Patrick Grey · Answer 3 · Wed Sep 27 2023 21:49:41 GMT+0800 (China Standard Time)

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 😬

Darby M. Dixon III · Answer 4 · Wed Nov 29 2023 05:24:55 GMT+0800 (China Standard Time)

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.

Chris Bracco · Answer 5 · Mon Dec 18 2023 02:48:41 GMT+0800 (China Standard Time)

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

Chris Bracco · Answer 6 · Mon Dec 18 2023 03:01:55 GMT+0800 (China Standard Time)

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">