Error building site: POSTCSS: failed to transform "css/main.css"

Support
,
1

I’m using the Hugo sam theme. As I understand it, it uses extended version of Hugo to generate css when building the site. I followed the theme instruction and it works fine when building locally. But there’s an error when it’s deployed on Netlify.

Error building site: POSTCSS: failed to transform "css/main.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/

It seems there’s something wrong with postcss-cli package? But how could I fix it as it’s on the Netlify server?

The full deploy log is here: Netlify App

2

You need to add a package.json to your repo with postcss-cli as a dependency.

3

Hi, I do have a package-lock.json in my repo. See here. What’s odd is that it used to work, but it suddenly stopped working after some recent commits and I don’t know what cause it.

4

package-lock.json is not the same as package.json. What you’ve done is rename the former to the latter and it doesn’t work that way. Would you please try what I’ve suggested above?

Considering you’ve NPM installed on your computer, run npm init, answer the questions and you’ll get a package.json. Then run the command suggested by Hugo (npm install.....) and let us know the results.

5

Hi, I’ve created the pacakge.json from npm init, but I still got the same error.

Here’s the latest deploy log Netlify App

6

You’ve still not added the dependency. I think, you should refer to some guides that can give you some basic idea about NPM, but as far as your problem is concerned, you can run npm install postcss-cli on your system and it should be fixed.

7

Thanks for your patience. I did add the package.json in the project root directory. See the updated repo. I’ve also read this npm doc on package.json. But what I don’t understand is that how running npm install postcss-cli will solve the deployment issue on Netlify. It’s not going to change any file in my project folder that’s pushed to Github.

8

Your package.json is wrong. It was correct in the previous commit. It was just missing the postcss-cli dependency required by Hugo to compile your CSS.

I told you to run npm install postcss-cli locally, because when you do that, NPM will add that dependency to your package.json without any errors, while if you add it manually, there’s a chance of making an error. You can then push your updated package.json to your repo and Netlify can then install it as a dependency while building your website. You can always choose to manually add the dependency if you’re sure you won’t cause any syntax error and correctly add the required version. This way, you won’t have to run the npm install command.

Basically, as I’ve been saying from the start, your repo is missing a package.json with postcss-cli as a dpendency. Adding that would fix the issue.

9

Thanks. I finally got it working.
For anyone who might stumble on this issue in the future, the package.json for the Hugo Sam theme needs to look like this.

{
  "dependencies": {
    "postcss-cli": "8.3.1",
    "postcss": "8.2.9",
    "autoprefixer": "10.2.5"
  }
}

This isn’t mentioned at all on the theme readme page. For someone who has no experience npm I think it’s not straightforward to figure out.

I also figured out why it worked flawlessly without the package.json file before. It’s because I used to push the resources folder to the repo which contains compiled css. Now I’ve ignored the resources folder so every time Netlify should compile all the css and Hugo resources on the fly, which should eliminate any cache problems I reckon.

1 Like
10

FYI: It was mentioned in the docs: no5workshop/themes/hugo-theme-sam at master · MohoWu/no5workshop · GitHub

11

Yes, I know the readme tells you what npm dependencies are needed. But I think it’s most relevant to building the site locally. Following the readme instruction doesn’t produce the package.json file in you project folder and that’s what really needed when you deploy the site on Netlify.

12

For future reference, when you run the command npm install <package name>, a package.json automatically gets created.

13

Thank you @mohowu for sharing the details of how you got this working! And thank you @hrishikesh for the awesome pointers and brainstorming. This thread will definitely be helpful for any future Forums members who encounter something similar. :slight_smile: