# Error building site: POSTCSS: failed to transform "css/main.css" **URL:** \ **Category:** Support\ **Tags:** hugo, deployment\ **Created:** [March 30, 2021, 11:26pm UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182 "2021-03-30T23:26:40Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![mohowu](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@mohowu](https://answers.netlify.com/u/mohowu)\ **Post date:** [March 30, 2021, 11:26pm UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/1 "2021-03-30T23:26:40Z")
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. ```auto 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](https://app.netlify.com/sites/no5shop/deploys/6063b1501baf0300077e71b4) ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [March 31, 2021, 4:31am UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/2 "2021-03-31T04:31:37Z")
You need to add a `package.json` to your repo with `postcss-cli` as a dependency. ---
**Author:** ![mohowu](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@mohowu](https://answers.netlify.com/u/mohowu)\ **Post date:** [March 31, 2021, 8:16am UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/3 "2021-03-31T08:16:00Z")
Hi, I do have a `package-lock.json` in my repo. See [here](https://github.com/MohoWu/no5workshop). 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. ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [March 31, 2021, 9:08am UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/4 "2021-03-31T09:08:46Z")
`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. ---
**Author:** ![mohowu](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@mohowu](https://answers.netlify.com/u/mohowu)\ **Post date:** [March 31, 2021, 9:50am UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/5 "2021-03-31T09:50:15Z")
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](https://app.netlify.com/teams/mohowu/builds/60644556c44a3300073e14dfhttps://app.netlify.com/teams/mohowu/builds/60644556c44a3300073e14df) ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [March 31, 2021, 9:59am UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/6 "2021-03-31T09:59:15Z")
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. ---
**Author:** ![mohowu](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@mohowu](https://answers.netlify.com/u/mohowu)\ **Post date:** [March 31, 2021, 10:34am UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/7 "2021-03-31T10:34:30Z")
Thanks for your patience. I did add the `package.json` in the project root directory. See the updated [repo](https://github.com/MohoWu/no5workshop). I’ve also read this npm [doc](https://docs.npmjs.com/creating-a-package-json-file#example) 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. ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [March 31, 2021, 10:39am UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/8 "2021-03-31T10:39:03Z")
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. ---
**Author:** ![mohowu](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@mohowu](https://answers.netlify.com/u/mohowu)\ **Post date:** [March 31, 2021, 11:36am UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/9 "2021-03-31T11:36:55Z")
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. ```auto { "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. ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [March 31, 2021, 11:44am UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/10 "2021-03-31T11:44:56Z")
FYI: It was mentioned in the docs: [no5workshop/themes/hugo-theme-sam at master · MohoWu/no5workshop · GitHub](https://github.com/MohoWu/no5workshop/tree/master/themes/hugo-theme-sam#requirements) ---
**Author:** ![mohowu](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@mohowu](https://answers.netlify.com/u/mohowu)\ **Post date:** [March 31, 2021, 11:54am UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/11 "2021-03-31T11:54:10Z")
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. ---
**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\ **Post date:** [March 31, 2021, 11:56am UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/12 "2021-03-31T11:56:36Z")
For future reference, when you run the command `npm install `, a `package.json` automatically gets created. ---
**Author:** ![hillary](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hillary/32/21132_2.png) [@hillary](https://answers.netlify.com/u/hillary)\ **Post date:** [March 31, 2021, 1:44pm UTC](https://answers.netlify.com/t/error-building-site-postcss-failed-to-transform-css-main-css/35182/13 "2021-03-31T13:44:45Z")
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. 🙂