Eleventy: Unable to use addWatchTarget

[nhoizey]

I'm trying to use @MadeByMike's addWatchTarget() to react to Sass files changes, but it does nothing.

Here's what I've put in my .eleventy.js file:

eleventyConfig.addWatchTarget("src/_assets/**/*.scss");

And here are my Sass files:
https://github.com/nhoizey/nicolas-hoizey.com/tree/master/src/_assets/sass

Any idea why this doesn't work?

Thanks.

[vseventer]

I'm wondering the same - it does not seem to be working. Diving into Eleventy internals, I noticed the watch targets are set in the Eleventy constructor, but this happens before the .eleventy.js code even runs. Therefore, the watch targets array is always empty.

If there's anything @nhoizey and I are missing, let us know.

[jordanthornquest]

Ran into this issue as well. I'm attempting to develop Nunjucks macros I'm storing in a module, which I'm accessing via npm link. It'd be nifty to watch the Nunjucks files for changes while I'm developing them. Attempting to addWatchTarget('node_modules/path/to/module/nunjucks-macros/') doesn't trigger a reload when saving a file in that directory.

I can certainly edit macros in my Eleventy project and copy them to my node module, but I'd love saving a step and reducing redundancy.

[nhoizey]

I still have this issue. Tried several syntaxes, with glob or not, and nothing is triggered when I change my Sass files… 🤷‍♂️

[Paul-Hebert]

@nhoizey , not sure if this will help or not, but this is working in my project: eleventyConfig.addWatchTarget("./src/**/*.{js,scss}");

Did you try starting the path with ./?

[nhoizey]

@Paul-Hebert I did write it like you, without success

[Paul-Hebert]

Ahh dang, I'm not sure what's going on then 😕

[acstll]

This isn't working for me either, but it was working at some point.

I was targeting the build files (output from webpack), like this:

eleventyConfig.addWatchTarget('./site/build/')

I have also tried targeting the ./src folder but no luck.

[therealpecus]

I noticed 11ty adds .gitignore files and directories in a ignoreFiles list, which probably defeats any addWatchTarget that might conflict with it.
In my case, built CSS files are in a _fractal folder that is purposefully excluded from git. No matter how I tried to add this path with addWatchTarget no watching happened.
After digging into the code and debugging output, this solved for me:

In .gitignore I had the folder excluded from versioning

/_fractal

This prevented Eleventy from picking it for watching.
Adding this setUseGitIgnore(false) in .eleventy.js solved it:

  eleventyConfig.setUseGitIgnore(false);
  eleventyConfig.addWatchTarget("./_fractal/css/style.css}")

YMMV (if you have template/content heavy sites or markdown/other template files in folders that were previously ignored by .gitignore this might add to build time and/or produce extra pages).

[acstll]

That did it for me, and it explains why it was working (before I added the folder to .gitignore). Thank you @therealpecus

Maybe there should be a note about this (.gitignore) in the documentation regarding addWatchTarget? If so, I could try and contribute a PR.

[Ryuno-Ki]

Or perhaps a warning of some level?
Something along the lines of:

${file/directory} was flagged as target to watch, but is also on .gitignore (resp. .eleventyignore) so won't be watched.

[therealpecus]

I made a PR for a minor doc update to start. Totally support @Ryuno-Ki proposal but I am short on time at the moment

[nhoizey]

@therealpecus OMG, thanks for the explanation!

Maybe we could ask Eleventy not to ignore files that are in addWatchTarget even if they are in .gitignore or .eleventyignore?