POSTCSS: failed to transform "css/styles.css"

[revanmd]

When i try to preview the site by following the quick preview steps, i got this error :

Start building sites … 
hugo v0.85.0 linux/amd64 BuildDate=2021-07-05T14:33:29Z
Error: Error building site: POSTCSS: failed to transform "css/styles.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/
Built in 49 ms

My hugo version is :
hugo v0.85.0 linux/amd64 BuildDate=2021-07-05T14:33:29Z

I have tried to install postcss globally but give the same error. How i resolve this error ?

Sorry if i'm wrong, cz i'm new in hugo.
Thanks

[apvarun]

The easiest way is to copy the package.json file from the theme folder to the hugo project root folder and then run npm install (make sure you have node js installed before running this command)

Once this is done, hugo serve would work. This step is a one-time process.

I will include it in the readme as well

[akhildevelops]

Still getting issues.

Copied the package json from themes/blist folder to the project root folder.
Ran npm install and then hugo serve.

Below is the error.

❯ hugo serve
Start building sites …
hugo v0.87.0+extended linux/amd64 BuildDate=2021-08-03T13:16:42Z
Error: Error building site: POSTCSS: failed to transform "css/styles.css" (text/css): TypeError: Object.fromEntries is not a function
    at Object.<anonymous> (/home/profitalgo/Personal/quickstart/themes/blist/node_modules/tailwindcss/lib/jit/corePlugins.js:242:13)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/home/profitalgo/Personal/quickstart/themes/blist/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js:36:43)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
Built in 1058 ms

config.toml of root folder

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = "blist"

[AntoineSoetewey]

Having the same issue.

@Enforcer007, did you manage to fix it?

[akhildevelops]

@AntoineSoetewey Nope

[apvarun]

Hey @AntoineSoetewey and @Enforcer007 ,

I tried to replicate this issue and seem to work as intended. Here are the steps I followed.

hugo new site test-blist
cd test-blist
git clone https://github.com/apvarun/blist-hugo-theme.git themes/blist
cp themes/blist/package.json ./package.json
cp themes/blist/package-lock.json ./package-lock.json
npm install
npm i -g postcss-cli
echo "theme = \"blist\"" >> config.toml
hugo serve

Installed versions:
POSTCSS: 9.1.0
Hugo version: 0.82.1

If this is not working, please share the version of postcss and hugo that you are using.

[AntoineSoetewey]

Works perfectly with this code ! Thanks, and great theme

[soulrrrrr]

Hi, after following the instructions above, I have this problem:
"/mnt/c/Users/USER/Desktop/aa/hugo_test/blast/layouts/partials/head.html:24:48": execute of template failed: template: partials/head.html:24:48: executing "partials/head.html" at <resources>: can't evaluate field PostProcess in type interface {}
Version:
postcss: 8.4.8
hugo: 0.68.3
on WSL2
Thanks!

[apvarun]

Hey @soulrrrrr this theme is compatible only with version v0.82.1 and above only.
Although 0.68 supports postcss, it has limitations in parsing values that are not formatted as required.

[soulrrrrr]

@apvarun Thanks! After upgrade Hugo's version, it works properly.