Hugo version 0.43 introduced Hugo Pipes which processes assets e.g. save preprocessed Sass files to CSS files. I finally got round to adding this as part of adapting the Ghostwriter theme I use on my site (a forked Ghostwriter theme by Juraj Bubniak).
Why Hugo Pipes and not Webpack
The theme had a webpack build for the Sass files which could be replaced by Hugo Pipes. This was attractive as it simplified the build process for my static site and removed webpack and a whole load of dependencies I no longer need to worry about keeping up-to-date.
How I added Hugo Pipes
The first step was to move the Sass files to a top level directory called
The second step was to add this pipeline:
For organisation, I added the above to a new partial called
layouts/partials/styles.html and then included this partial into the
header.html partial using
allows for caching of partials that do not need to be re-rendered on every invocation
After some testing to check it worked, the final step for local development was the happy task of deleting the webpack config and associated files.
In terms of deploying, I use Netlify and there turned out to be one gotcha.
The issue per this post from Netlify is due to an older version of an Ubuntu image which was incompatible with the version of Hugo. In order to use Hugo Pipes you need to make sure you are using the new Ubuntu image. If you recently set up a Hugo site on Netlify this new Ubuntu image is the default. My site has been on Netlify for some time so I needed to go into the settings and select the new Ubuntu Xenial build image.
With that done, I re-deployed and this time the deploy went through and everything worked.