eleventy watch having weird issues

[AlexNodex]

Describe the bug when running eleventy --config=.eleventy.config.js --watch --serve the watcher is doing two weird things.

I have a custom sass handler to deal with scss files (because I want them bundled in to one large file.

eleventyConfig.addTemplateFormats("scss");
  let compiled_sass = [];
  eleventyConfig.addExtension("scss", {
    outputFileExtension: "css", // optional, default: "html"
    compile: async function (inputContent, inputPath) {
      console.dir(arguments);
      let result = sass.compileString(inputContent, { style: "compressed" });
      compiled_sass.push(result.css);
      return async (data) => {
        //return result.css;
      };
    }
  });

// later on down the file I listen to `eleventy.after` and `join` the `compiled_sass` in to a CSS string and write it to a file...

This all works fine. The issue is when I run the --watch option. On the first run it works fine, however, when I change a scss file it caches the old css options...

[11ty] Writing public/blog/index.html from ./src/modules/blog/blog.njk
[11ty] Writing public/index.html from ./src/foo.twig
[11ty] Writing public/blog/articles/article-1.html from ./src/modules/blog/articles/article-1.njk
[ 'body{font-size:2rem}', 'body{background:purple}' ] // <--- Logged out for DEBUG
[eleventy-plugin-clean] Removed 0 files
[11ty] Wrote 3 files in 0.07 seconds (v1.0.2)
[11ty] Watching…
[Browsersync] Access URLs:
// changed a scss file (caused a reload)

[11ty] Writing public/index.html from ./src/foo.twig
[11ty] Writing public/blog/index.html from ./src/modules/blog/blog.njk
[11ty] Writing public/blog/articles/article-1.html from ./src/modules/blog/articles/article-1.njk
[
  'body{font-size:2rem}',
  'body{background:purple}',
  'body{background:blue}'
] // same log for DEBUG, however the second array item is invalid as it's now been changed (they've been cached somehow) and the third one is the new value (in the file I just changed the body color from purple to blue)
[eleventy-plugin-clean] Removed 0 files
[11ty] Wrote 3 files in 0.03 seconds (v1.0.2)
[11ty] Watching…

Second weird bug....

While --watching, if I change the .eleventy.config.js file it doesn't pick up the scss files anymore from above and it require a ctrl-c plus restart of the watcher to pick them up again!

eleventy is installed globally - would this have anything to do with it? I can't see how it would affect the first error, but perhaps the second?

[pdehaan]

Maybe you need to add a matching eleventy.before event listener that resets the compiled_sass[] array?

  eleventyConfig.on("eleventy.before", function (args) {
    compiled_sass = [];
  });

[AlexNodex]

Maybe you need to add a matching eleventy.before event listener that resets the compiled_sass[] array?

  eleventyConfig.on("eleventy.before", function (args) {
    compiled_sass = [];
  });

Thanks for your input, this fixes the first issue :), but not the second. I think the second issue is related to it not reloading the .eleventy.js properly on changes

[pdehaan]

I think the second issue is related to it not reloading the .eleventy.js properly on changes

I haven't tried it (since I don't generally use --watch or --serve), but you could try explicitly adding ".eleventy.js" as a watch target: https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets

[zachleat]

This is likely the same issue that was fixed as part of the compileCache improvements for #2258. I put in a ton of work to make this better with 2.0.0-canary.19—so please retest after that version ships!

Thank you!

[zachleat]

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and we will reopen the issue. Thanks!