Netlify Hugo Sass Error

02/23/20191 Min Read — In Netlify, Hugo, DevTools

Yesterday I was working on my portfolio site. A local copy of Hugo, the static site generator written in Golang, worked fine on my machine.

But when I tried to deploy the site to Netlify, the builds failed with an error:

failed to transform resource: TOCSS: failed to transform "css/main.tmp.css" (text/x-sass): this feature is not available in your current Hugo version

The reason?

My website template uses Sass and PostCSS. This only works with the extended version of Hugo. On my local machine, this wasn't a problem. But Netlify still ships the standard version of Hugo.
Luckily, this will soon be fixed but for now, there is an ugly fix:

Run hugo locally with the extended version, then check in your resources/_gen/assets directory to the repository so that Hugo skips trying to generate the assets.

I use a private Gitlab repository for source control.

So, before you push changes to your remote repository, check:

  • Did I run hugo, so that my resources/_gen/assets are up to date? (No, hugo server is not enough!)
  • Is resources/_gen/assets in my .gitignore? If so, make sure to change it.

Further Reading