SASS not rendered on GitLab CI

[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.