Drupal srcset in static HTML pages: gulp asset build pipeline

Client has a bunch of static landing pages that are mobile-friendly and need to remain that way.

But what is to be done about srcset? Read on, oh reader, for the solution.

First, I created a gulp build task which makes a bunch of different sizes.

Install dependencies like this:
npm install -D gulp-load-plugins gulp-responsive sharp

The task looks like this:

Error: no mixin named container or border-box-sizing

It can be hard to tell why a mixin fails in a sass file. After all, if the mixin isn't included in your dependencies automatically as it was before, grepping for it in the files won't turn up anything.

I was using a child theme of Classy, running Drupal 8. It turns out that this particular generically-named mixin comes from susy 2.x, having been removed in susy 3.x.

I fixed this by setting the susy version number like so in package.json:

Subscribe to gulp