SASS not rendered on GitLab CI

[VincentTam]

Repo that I’m working on: https://gitlab.com/VincentTam/introduction
Branch: staticman
Test site: https://vincenttam.gitlab.io/introduction

I’m trying to add a conditional in a SASS file to optionally load a SASS file assets/sass/_staticman.sass

# assets/sass/style.sass
{{ if .Site.Params.staticman }}
@import "staticman"
{{ end }}

I’ve set that parameter to true. It gets loaded into the template.

# layouts/partials/head/css.html
{{ $bundleRaw := resources.Get "sass/style.sass" | resources.ExecuteAsTemplate "/css/main.tmp.css" . }}

{{ if .Site.IsServer }}
{{ $cssOpts := (dict "targetPath" "/css/main.css" "enableSourceMap" true ) }}
{{ $bundle := $bundleRaw | toCSS $cssOpts }}
<link rel="stylesheet" href="{{ $bundle.RelPermalink }}" media="screen">
{{ else }}
{{ $cssOpts := (dict "targetPath" "/css/main.css" ) }}
{{ $postCSSOpts := (dict "use" "autoprefixer" ) }}
{{ $bundle := $bundleRaw | toCSS $cssOpts | postCSS $postCSSOpts | minify | fingerprint }}
<link rel="stylesheet" href="{{ $bundle.RelPermalink }}" integrity="{{ $bundle.Data.Integrity }}" crossorigin="anonymous" media="screen">
{{ end }}

It workes fine in local preview.

However, it doesn’t get loaded in GitLab CI’s build:
https://vincenttam.gitlab.io/introduction/css/main.min.66cab924513b4e21e82a3a8bdf4737b1450d809e919f8db8b672e9744d7f2f1f.css

---

Edit: the above link is no longer valid since I’ve solved this problem and regenerated CSS resources. The problematic generated CSS file in the artifact is downloadable at https://gitlab.com/VincentTam/introduction/-/jobs/258602835/artifacts/file/public/css/main.min.66cab924513b4e21e82a3a8bdf4737b1450d809e919f8db8b672e9744d7f2f1f.css.

---

The

.modal-close{background-color:#000}

at the end of the generated CSS code actually comes from

# assets/sass/style.sass
{{ $themeStyle := .Site.Params.themeStyle | default "light" }}
@import "{{ $themeStyle }}-style"

I’ve used monachus/hugo in my GitLab CI config. I’m scratching my head on the reason why the rules for Staticman doesn’t get loaded.

[VincentTam]

Analysis of problem

I’ve finally got a hint on this problem after running hugo --themesDir=../.. without server—that renders .Site.IsServer false, so that the error message

Plugin Error: Cannot find module 'autoprefixer''

comes out. The following question appeared in the search results.

Hugo Pipes - PostCSS - How to use global autoprefixer

I made a test environment where I’m trying to use the global autoprefixer (npm install -g autoprefixer), as in the documentation, however, I’m getting the following error: [error] When I install the autoprefixer package locally (npm install autoprefixer -D), it works. _baseof.html source: {{ $styles := resources.Get "scss/main.scss" | resources.ToCSS | resources.PostCSS (dict "config" "postcss.config.js") }} <link rel="stylesheet" href="{{ $styles.Permalink }}"> postcss.config.js source: …

If I had read the docs about PostCSS and the theme’s README, I wouldn’t have been stuck for hours.

Resolution

I’ve followed the advice in the 2nd comment and installed locally the Node.JS modules autoprefixer and postcss-cli. (Global installation didn’t work.) After that, the modules were installed in node_modules and package-lock.json is generated (but not package.json). Finally,

$ cd exampleSite
$ hugo --themesDir=../.. -d public

generates the desired CSS resources under exampleSite/resources/_gen. Now, the CSS rules for Staticman are loaded.