Getting imported .less files to update with au run --watch in Aurelia

Question

Sorry, this is quite hard to explain but I want to be able to change any less file (including imported ones) and have it update the site via watch.

I have a root level (from src) site.less file.

I also have various less files scattered around the src folder and am importing them from in the site.less file.

When I run au run --watch this inital build is updating css for my application successfully. When I then update a less file it is triggering a refresh but the site is not updated with the changes.

In an attempt to resolve this, I have changed the watch file in aurelia_project/tasks/watch. - I have made it so that when a less file is changed it only adds my root less file to the pendingRefreshPaths instead.

Now when I change and save an imported less file it is triggering a watch refresh adding in the appropriate files (including the root) but still not updating the site.

If I then open the root less file and save with no changes it is doing the same, no changes are shown.

The strange thing and clue to where I think I need to look is if I CHANGE the contents of the root less file and THEN save, it all works as expected.

As such I think I need to trick somewhere in the pipeline to make it think there is a real change to the root less file so that watches from other less files are actually successful.

Any ideas where it is ignoring unchanged files despite being in the pendingRefreshPaths?

Answer 1

Found the culprit, it is the changedInPlace function that was filtering it out.

As such if I remove this, now when I change any .less file it ques up the root .less file instead and this obviously imports and compiles the other files successfully.

export default function processCSS() {
  return gulp.src(project.cssProcessor.source) <--- remove this
    //.pipe(changedInPlace({firstPass:true}))
    .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(build.bundle());
}

watch.ts

let watch = (callback?) => {
  watchCallback = callback || watchCallback;
  return gulpWatch(
    Object.keys(watches),
    {
      read: false, // performance optimization: do not read actual file contents
      verbose: true
    },
    (vinyl) => {
      if (vinyl.path && vinyl.cwd && vinyl.path.startsWith(vinyl.cwd)) {
        let pathToAdd = vinyl.path.substr(vinyl.cwd.length + 1);

        if (pathToAdd.endsWith(".less")) { 
          log(`Watcher: Adding path src\\site.less to pending build changes...`);
          // Crude but could be moved to config to define a root
          pendingRefreshPaths.push("src\\site.less");
        }
        else {
          log(`Watcher: Adding path ${pathToAdd} to pending build changes...`);
          pendingRefreshPaths.push(pathToAdd);
        }
        refresh();
      }
    });
};