HUGO

Error with postcss

I’m trying to run postcss and tree-shake the css with the following code:

	{{ $fontawesome := resources.Get "css/fontawesome/fontawesome.css"  }}
	{{ $brands := resources.Get "css/fontawesome/brands.css"  }}
	{{ $regular := resources.Get "css/fontawesome/regular.css"  }}
	{{ $solid := resources.Get "css/fontawesome/solid.css"  }}

	{{- $bootstrap := resources.Get "css/bootstrap.min.css" -}}
	{{- $nowUi := resources.Get "scss/now-ui-kit.scss" | resources.ToCSS (dict "enableSourceMap" false "outputStyle" "compressed") -}}

	{{- $style := slice $bootstrap $nowUi $montserrat $fontawesome $brands $regular $solid | resources.Concat "css/style.css" | resources.Fingerprint -}}

	{{ $styles := $style | postCSS (dict "config" "./assets/css/postcss.config.js") | minify  -}}
	{{ with ($styles  ) }}
	<style>
		{{.Content | safeCSS }}
	</style>
	{{ end }}

It works locally, but on my server running ubuntu it fails with:

error calling Content: POSTCSS: failed to transform "css/style.276ea63b605d92be12e51bfd84d36777a9c864933d025be61fe3570cbebbe2bb.css"

I double checked that all the modules were installed and even tried sudo npm i -g. The error isn’t all that descriptive to me. Can anyone point me in the right direction?

I just pushed an update to make sure we always preserve the full error message (not sure how helpful that will be).

That said, reading the code I would guess you got a ErrFeatureNotAvailable … But I’m not sure what, but I guess it cannot find the postcss-cli. I suggest that you as a starter try to get something like GitHub - bep/hugo-starter-tailwind-basic: A basic and simple to set up Hugo with TailwindCSS starter project. running.

From your feedback, I tried to remove node-js completely from the server and install with nvm. It worked, so maybe yes, the system couldn’t find postcss-cli even though it was installed.

in your sample that one is not defined. Might be just a copy/paste thing here, but maybe your stylesheet is empty. PostCSS will drop that error above when the file to transform is empty.

1 Like