Unable to build with PostCSS on current Hugo version

support
1

I am unable to build my website using the latest Hugo extended version (0.101.0). It fails on PostCSS processing, which is weird, as it used to work just fine on older versions of Hugo. I am not sure which version broke it as I haven’t run Hugo in a long time and my Hugo Snap auto updates.

My version:
hugo v0.101.0-9f74196ce611cdf6d355bfb99fd8eba5c68ef7f8+extended linux/amd64 BuildDate=2022-06-28T10:02:18Z VendorInfo=snap

Build log:

hugo -D -F --printI18nWarnings --baseURL=http://localhost:8888 --watch
Start building sites … 
hugo v0.102.0-DEV-65e52a7f5c79e6cfeabafa67d1bff4994c7fc4a4+extended linux/amd64 BuildDate=2022-06-28T18:51:33Z VendorInfo=snap
WARN 2022/06/29 10:54:07 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2022/06/29 10:54:07 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
ERROR 2022/06/29 10:54:07 POSTCSS: failed to transform "aboveFold.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
ERROR 2022/06/29 10:54:07 POSTCSS: failed to transform "belowFold.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
Error: Error building site: failed to render pages: render of "page" failed: "web/layouts/_default/baseof.html:3:7": execute of template failed: template: _default/single.html:3:7: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "/home/oscar/projects/seconds-service/app/src/web/layouts/partials/head.html:27:27": execute of template failed: template: partials/head.html:27:27: executing "partials/head.html" at <$aboveFoldStyles.Content>: error calling Content: POSTCSS: failed to transform "aboveFold.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
Total in 209 ms

package.json (tried with both postcss-cli@8.1.0, which used to work, and upgrading to 9.1.0)

{
  "name": "debricked",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "dependencies": {
    "both": "^0.0.0",
    "cssnano": "^5.0.12",
    "lite-youtube-embed": "^0.2.0",
    "postcss": "^8.4.14",
    "postcss-cli": "^9.1.0",
    "swiper": "^7.0.8"
  },
  "private": true
}
2

Please share a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

I just had this come up on on a site I haven’t touched for some time while using Hugo v0.101.0.

This is on a windows install. The error threw me off, but a quick fix was to simply npm install postcss-cli -g although the correct way now is likely npm install postcss-cli --location=global.

4

@RHEV - also see this newly added guide:

1 Like