Hugo theme "Docsy". Error: Error building site: POSTCSS: failed to transform "scss/main.css"

Support
, ,
1

Netlify newbie here. Trying to host the Hugo theme “Docsy”, but running into a dependency issue with PostCSS? Build log is below.

How can I install PostCSS as part of the Netlify deployment? Hope that makes sense.

Best regards,
Rod

Build Log Below

4:10:28 PM: Build ready to start
4:10:30 PM: build-image version: 53b83b6bede2920f236b25b6f5a95334320dc849
4:10:30 PM: build-image tag: v3.6.0
4:10:30 PM: buildbot version: 8ae026ef4905d9174e416775c6b64aa19950569b
4:10:30 PM: Fetching cached dependencies
4:10:30 PM: Failed to fetch cache, continuing with build
4:10:30 PM: Starting to prepare the repo for build
4:10:31 PM: No cached dependencies found. Cloning fresh repo
4:10:31 PM: git clone https://github.com/prdsoftware/documentation
4:10:35 PM: Preparing Git Reference refs/heads/master
4:10:37 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: ‘helpmaster/hm_documentation’ versus ‘hm_documentation’ in the Netlify UI
4:10:38 PM: Starting build script
4:10:38 PM: Installing dependencies
4:10:38 PM: Python version set to 2.7
4:10:39 PM: v12.18.0 is already installed.
4:10:39 PM: Now using node v12.18.0 (npm v6.14.4)
4:10:39 PM: Started restoring cached build plugins
4:10:39 PM: Finished restoring cached build plugins
4:10:40 PM: Attempting ruby version 2.7.1, read from environment
4:10:41 PM: Using ruby version 2.7.1
4:10:41 PM: Using PHP version 5.6
4:10:41 PM: Installing Hugo 0.79.0
4:10:42 PM: Hugo Static Site Generator v0.79.0-1415EFDC/extended linux/amd64 BuildDate: 2020-11-27T09:16:17Z
4:10:42 PM: Started restoring cached go cache
4:10:42 PM: Finished restoring cached go cache
4:10:42 PM: go version go1.14.4 linux/amd64
4:10:42 PM: go version go1.14.4 linux/amd64
4:10:42 PM: Installing missing commands
4:10:42 PM: Verify run directory
4:10:44 PM: ​
4:10:44 PM: ────────────────────────────────────────────────────────────────
4:10:44 PM: Netlify Build
4:10:44 PM: ────────────────────────────────────────────────────────────────
4:10:44 PM: ​
4:10:44 PM: ❯ Version
4:10:44 PM: @netlify/build 8.0.0
4:10:44 PM: ​
4:10:44 PM: ❯ Flags
4:10:44 PM: deployId: 5fed5d441c14eddf7092d50e
4:10:44 PM: mode: buildbot
4:10:44 PM: ​
4:10:44 PM: ❯ Current directory
4:10:44 PM: /opt/build/repo/helpmaster
4:10:44 PM: ​
4:10:44 PM: ❯ Config file
4:10:44 PM: No config file was defined: using default values.
4:10:44 PM: ​
4:10:44 PM: ❯ Context
4:10:44 PM: production
4:10:44 PM: ​
4:10:44 PM: ────────────────────────────────────────────────────────────────
4:10:44 PM: 1. Build command from Netlify app
4:10:44 PM: ────────────────────────────────────────────────────────────────
4:10:44 PM: ​
4:10:44 PM: $ cd themes/docsy && git submodule update -f --init && npm install postcss-cli && npm install autoprefixer && cd …/… && hugo
4:10:45 PM: npm WARN deprecated fsevents@2.1.3: Please update to v 2.2.x
4:10:49 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/chokidar/node_modules/fsevents):
4:10:49 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
4:10:49 PM: npm WARN postcss-cli@8.3.1 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself.
4:10:49 PM: npm WARN postcss-reporter@7.0.2 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
4:10:49 PM: npm WARN docsy No repository field.
4:10:49 PM: npm WARN docsy No license field.
4:10:49 PM: + postcss-cli@8.3.1
4:10:49 PM: added 94 packages from 65 contributors and audited 95 packages in 4.405s
4:10:49 PM: 11 packages are looking for funding
4:10:49 PM: run npm fund for details
4:10:49 PM: found 0 vulnerabilities
4:10:51 PM: npm WARN postcss-cli@8.3.1 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself.
4:10:51 PM: npm WARN postcss-reporter@7.0.2 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
4:10:51 PM: npm WARN autoprefixer@10.1.0 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
4:10:51 PM: npm WARN docsy No repository field.
4:10:51 PM: npm WARN docsy No license field.
4:10:51 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
4:10:51 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
4:10:51 PM: + autoprefixer@10.1.0
4:10:51 PM: added 8 packages from 7 contributors and audited 103 packages in 1.661s
4:10:51 PM: 13 packages are looking for funding
4:10:51 PM: run npm fund for details
4:10:51 PM: found 0 vulnerabilities
4:10:51 PM: Start building sites …
4:11:03 PM: WARN 2020/12/31 05:11:03 found no layout file for “JSON” for kind “home”: You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
4:11:04 PM: Total in 12338 ms
4:11:04 PM: Error: Error building site: POSTCSS: failed to transform “scss/main.css” (text/css): resource “scss/scss/main.scss_4853eb546e7a6c0898ed71feae7357c0” not found in file cache
4:11:04 PM: ​
4:11:04 PM: ────────────────────────────────────────────────────────────────
4:11:04 PM: “build.command” failed
4:11:04 PM: ────────────────────────────────────────────────────────────────
4:11:04 PM: ​
4:11:04 PM: Error message
4:11:04 PM: Command failed with exit code 255: cd themes/docsy && git submodule update -f --init && npm install postcss-cli && npm install autoprefixer && cd …/… && hugo
4:11:04 PM: ​
4:11:04 PM: Error location
4:11:04 PM: In Build command from Netlify app:
4:11:04 PM: cd themes/docsy && git submodule update -f --init && npm install postcss-cli && npm install autoprefixer && cd …/… && hugo
4:11:04 PM: ​
4:11:04 PM: Resolved config
4:11:04 PM: build:
4:11:04 PM: base: /opt/build/repo/helpmaster
4:11:04 PM: command: cd themes/docsy && git submodule update -f --init && npm install postcss-cli && npm install autoprefixer && cd …/… && hugo
4:11:04 PM: commandOrigin: ui
4:11:04 PM: environment:
4:11:04 PM: - HUGO_ENV
4:11:04 PM: - HUGO_VERSION
4:11:04 PM: publish: /opt/build/repo/helpmaster/hm_documentation
4:11:04 PM: Caching artifacts
4:11:04 PM: Started saving build plugins
4:11:04 PM: Finished saving build plugins
4:11:04 PM: Started saving pip cache
4:11:04 PM: Finished saving pip cache
4:11:04 PM: Started saving emacs cask dependencies
4:11:04 PM: Finished saving emacs cask dependencies
4:11:04 PM: Started saving maven dependencies
4:11:04 PM: Finished saving maven dependencies
4:11:04 PM: Started saving boot dependencies
4:11:04 PM: Finished saving boot dependencies
4:11:04 PM: Started saving rust rustup cache
4:11:04 PM: Finished saving rust rustup cache
4:11:04 PM: Started saving rust cargo bin cache
4:11:04 PM: Finished saving rust cargo bin cache
4:11:04 PM: Started saving go dependencies
4:11:04 PM: Finished saving go dependencies
4:11:06 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
4:11:06 PM: Failing build: Failed to build site
4:11:07 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 2
4:11:07 PM: Finished processing build request in 36.277496608s

2

Are you sure you have such a file in your repo? My guess would be that it should just be main.scss, but can’t say for sure without having a look at the repo.

3

Thanks. That file does not exist in the repo. Is it supposed to be generated by the CSS compiler? My local Hugo site builds and displays just fine.

4

Sadly, I can’t be sure about that without checking the repo.

5

Has anyone managed to host Docsy on Netlify? I can build it locally with “hugo server” and “hugo”, but not on Netlify. G

6

A repo with the problem would be great to test.

7

OK, I’ve made the repository public. Is that what you meant?

8

I got it working. I didn’t get the error you got, but I fixed the small error I got. Here’s the website: https://kind-heisenberg-fa7fcf.netlify.app/ and repo: https://github.com/Hrishikesh-K/helpmaster.

Don’t forget to set an environment variable in Netlify UI:

EV name: HUGO_VERSION
EV value: 0.80.0

0.80.0 is current latest version, you can choose to use any other that supports all the features you need.

9

That’s great! What build command did you use in Netlify?

I would love to know more about how you got it going. I’ve spent days trying to figure this out.

Thanks,
Rod

10

I used hugo. Here’s the deploy log: Netlify App

EDIT: You can also choose to use hugo --minify to get a minified output.

About how I got it going, there is not much to say. I cloned your repo, ran npm install and then checked if it was working locally. Then I tried publishing it on Netlify. First it didn’t work, so I tried comitting the package-lock.json too. That didn’t help either. So, I did what the build log of the unsuccessful deploy said: it could not find postcss, so I installed postcss using npm install --save postcss which also added that dependency to pakage.json and pushed the file to my repo. That fixed it.

I also got rid of a warning which said Hugo could not find a layout for JSON export for home page. I just removed the JSON from config.toml’s outputs part. This was optional.

Like I said, I didn’t get the error you mentioned, so I don’t really know what was going wrong with your deploy, but this is how it worked out for me. You can choose to clone my repo and continue developing in it.

11

Thanks so much. I got it going also. Seems like it was just that missing postcss dependency which was staring me in the face all the time. I was following the instruction from the theme builder and it did not mention to install that, but instead postcss-cli.

My bad. Learning experience for sure.

Let me know how I can repay you. Thanks again.

1 Like