Instructions on postcss and hugo - should I commit package-lock.json?

Hello,

I am building a website using the hugo sam theme.

I have run into the following error in my build

Transformation failed: POSTCSS: failed to transform “css/main.css” (text/css): PostCSS not found; install with “npm install postcss-cli”. See PostCSS | Hugo

I have followed the instructions on that page to install postcss-cli and auto-prefixer, but I am not sure what to push to my repo to get the build on netlify to work. Also, the theme’s README has recently been updated to include instructions on installation of postcss-cli and auto-prefixer but with a global installation.
But my understanding is that if I want the build to be done on netlify, I need to do a local installation and push certain files to the repo. Is that correct?
If I do a local installation using npm install postcss-cli, I get a package-lock.json file and a node_modules/ folder. Do I need to push all of it, or only the modules related to css?

I am new to all of this and would appreciate any help to understand how it works.

Thank you!

Hi there,

please do not push the node_modules folder - that is something that will get automatically installed according to what is listed out in your package.json file.

A little more info on that here:

My first question is, does the project build locally? This sounds a bit like you maybe changed something in your package.json and didn’t push it to github.

Let us know if this helps!

I hadn’t done npm init before the npm install, which is why I didn’t get the package.json file at the root level.
I have now pushed the package.json file and also added node_modules/ to the .gitignore as recommended in your reply, and the site built correctly on netlify.
I have an additional question, npm creates a package-lock.json file too with the following comment:

npm notice created a lockfile as package-lock.json. You should commit this file.

Is it best to commit it in addition to the package.json file?

Thank you for your help!

Hi there,

Good question!

Some disagreement exists on whether repos should include package-lock.json , but committing it does ensure greater consistency between the environments where it was created and the Netlify Build environment, so it is beneficial to commit it and push it, we think. While the package.json specifies the packages and builds generally, it often leaves some room for there to be slight differences between what the package.json recommends and what actually gets installed, as you are able to say “i want at least version 12.3 but higher would also be ok of $somePackage”. While in a perfect world all minor versions would play nice all the time, they don’t always, and this can cause some friction, sometimes.

The build env, like any other computer that clones the repo, can install the dependencies based on the package.json, but if there’s no package-lock.json it can’t guarantee eveything is on the same version.

Or put another way -

  • Required? No, though not really because the build process creates one. More because package.json has the basic info we need.
  • Recommended? Depends on who you talk to, but it does help with inconsistencies across environments.

Let us know if you still have questions!

Thank you so much for such a detailed answer!

1 Like