Aurelia-cli sass and Bourbon watch problem

Help Requests
1

Hi,

I’m using aurelia-cli with require.js (default) and SASS with bourbon in my project. I modified the processCSS task from aurelia-cli skeleton like this :

export default function processCSS() {
  return gulp.src(project.cssProcessor.source)
    .pipe(changedInPlace({ firstPass: true }))
    .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: [].concat(bourbon.includePaths),
      errLogToConsole: true
    })
      .on('error', sass.logError))
    .pipe(build.bundle());
}

I have a main scss file that is importing other scss files like this :
./src/styles/main.scss
./src/styles/components/comp1.scss
./src/styles/components/comp2.scss

When I run au Build or au Watch everything is fine, all my scss is compiled into a main.css that is piped to build.bundle().

But if I edit ./src/styles/components/comp1.scss (or 2) during a watch, the processCSS task is rightly called, but process nothing (0 items), and I don’t get why ?

It seems that it only sass() the modified file (comp1.scss) but the main.scss that is not modified is not recompiled, and as the main import all scss, the output .CSS is empty at runtime during a watch.
Can anyone provide some help on the subject?
Thanks

[EDIT]
nop, I was wrong on the last point, it appears that even if I edit main.scss it also trigger a processCSS that process nothing (0 items from log output)
also I found this issue https://github.com/aurelia/hot-module-reload/issues/16 but I’m not sure it is related as I don’t use webpack

3

(excuse possible earlier reply - I didn’t quite read your post correctly)

I no longer remember why, but for the longest time I’ve had the changedInPlace line commented out in the process-css.ts and that works well for me:

export default function processCSS() {
  return gulp.src(project.cssProcessor.source)
    // Removing this means a _partial change will actually result in new app.css
    //.pipe(changedInPlace({firstPass:true})) 
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(build.bundle());
};

It may also be worth checking your aurelia.json to make sure the cssProcess source field covers all the files by using a ** e.g. src/styles/**/*.scss

It is unusual for the imported css files not to be preceded by an underscore (see Sass import docs), as without it a change to comp1.scss would likely try to create a comp1.css which I’m assuming is not the css file you’re referencing. So perhaps a renaming to _comp1.scss might help?

1 Like
4

Wow, commenting changedInPlace did also worked for me, it may rebuild all the style even on partial changes but It doesn’t take more time to process on my case, and it is much easier to work like this! :+1:
Thank you so very much that drove me crazy, I’m going to dig into what this changedInPlace does to try to understand this issue.

they do say on github :

gulp-changed-in-place
By default it’s only able to detect whether files in the stream changed. If you require something more advanced like knowing if imports/dependencies changed, create a custom comparator, or use another plugin.

I omited to speak about aurelia.json, but I have indeed an ** glob, it’s targeting directly src though
I also was forgetting the _ part, but I also name all my imported scss file with prefix _ (on the filessystem, not in the code import path).

5

There is separate gulp-sass-watch plugin, which takes depenencies into consideration

So it adds the ones that import the changed one to pipeline