live reload on imported css file

[julientaq]

hi there.

i’m using eleventy 2.0 and my folder with the simplest setup for css file: a css folder that contains a main.css filled like this

@import url("./modules/fonts.css");
@import url("./modules/variables.css");
@import url("./modules/texts.css");
@import url("./modules/images.css");
@import url("./modules/tables.css");

When i’m updating my main.css file, i get a perfect blazing fast (amazing work btw) live reload.

But if i update one of the css file imported in main.css, the console tell me that the live reload worked, but the styles are not updated until i reload the page.

I looked a bit at the code, and it seems that this line of code is the one doing the work.

eleventy-dev-server/client/reload-client.js

Line 178 in 8665cce

for (let link of document.querySelectorAll(`link[rel="stylesheet"]`)) {

From what i understand here, the css update of the page is done by updating the url to the main file, but it doesn’t account for the imported files that this one may contain.

If i try to save the main.css after updating the imported file, the live reload doesn’t work either so i guess it has to do with how the server look at the imported css files, if it looks at those.

[xiaohk]

Hello @julientaq, I can't even make hot reloading with main.css work 😭 What's your setting in eleventy.config.js?

I used the configuration below, and updating css file just shows [11ty] File changed: css/post.css (skips build)

eleventyConfig.setServerOptions({
  watch: ["css/*.css"],
});

---

Edit

I fixed it by using <link rel="stylesheet" href="/css/post.css"> to refer to css files instead of using {%- css %}{% include "/css/post.css" %}{%- endcss %} in my .njk files.

[cgwrench]

I think this is similar to what I raised here: 11ty/eleventy#2807. I'm struggling to get live reloading working with inlined CSS, and I think it's because of the same bit of code referenced above in #63 (comment). In my case, I don't have a link[rel="stylesheet"], since my CSS is inlined.

[julientaq]

oh wow sorry i missed the comment! @xiaohk ! i really feel bad about it :/

i completely switched how i called the css. and use lighntingCSS with this plugin. https://github.com/5t3ph/eleventy-plugin-lightningcss

which is blazing fast and works amazingly well with the increment feature.

it add css has a custom data lang, which meach that the css leave the static folder for the content one (which is exactly what it should be :D)