Moving to Hugo modules with a theme using SCSS

support
,
1

I made a theme (stephlocke/slamp: An AMP⚡ theme) within my hugo project and then pushed the theme to github. The theme uses the SCSS files from ampcssframework/ampcssframework.

I have started implementing hugo modules following Hugo modules for “dummies”

  1. I got the latest go version after some go errors
  2. I did hugo mod init newhugosite
  3. I added the theme as a module import in my config
  4. I ran hugo serve

I got the following:

> hugo serve
go get: added github.com/stephlocke/slamp v0.0.0-20220218190908-5bc6d9ba1e8e
hugo: collected modules in 637 ms
Start building sites … 
hugo v0.92.2+extended linux/amd64 BuildDate=unknown
ERROR 2022/02/18 19:38:15 failed to render pages: render of "page" failed: execute of template failed: template: _default/single.html:4:6: executing "_default/single.html" at <partial "head/base.html" .>: error calling partial: execute of template failed: template: partials/head/base.html:20:3: executing "partials/head/base.html" at <partial "head/styles.html" .>: error calling partial: "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/stephlocke/slamp@v0.0.0-20220218190908-5bc6d9ba1e8e/layouts/partials/head/styles.html:8:19": execute of template failed: template: partials/head/styles.html:8:19: executing "partials/head/styles.html" at <.Content>: error calling Content: TOCSS: failed to transform "custom.scss" (text/x-scss): SCSS processing failed: file "stdin", line 69, col 1: File to import not found or unreadable: vendor/rfs. 
Error: Error building site: TOCSS: failed to transform "custom.scss" (text/x-scss): SCSS processing failed: file "stdin", line 69, col 1: File to import not found or unreadable: vendor/rfs. 
Built in 52 ms

I suspect I’m missing some of the intricacies of working with SCSS in theme modules. I read Bootstrap SCSS Hugo Module - HUGO (gohugo.io) and looked at the associated repo and it didn’t clear things up.

In my theme assets dir I have a folder called vendor/ that contains the file _rfs.scss.

What modifications do I need to make to my theme to allow it to complete the SCSS asset pipeline?

2

There’s a long and slightly painful background story, but I suggest that you update your Bootstrap module to point to:

[module]
[[module.imports]]
path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"

Or if v4:

[module]
[[module.imports]]
path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v4"
3

So,

  1. Remove the vendor dir from the theme path
  2. Add the additional import

And it should broadly work?

4

Well, I’m just judging it by your summary, so it’s hard to give any guarantees… But I do understand the problem, so if that fix doesn’t … fix it, let me know and I will help.

5

The import didn’t work for me (probably user error!) but as I had a version of vendor/_rfs under my source control I renamed vendor to vendor1 and it worked fine. At some point I’ll come back to the import approach and do it properly instead of hacky.

Thanks for the ongoing amazing work on this fab project!

1 Like
6

So the technical reason about this is that the top level vendor folder is reserved for Go vendoring, and there is a bug (which I suspect they hesitate to fix) that treats all vendor folders as vendor, which they skip when packing a module. So it appears that it’s not there. So the fix/workaround is to rename to something else (or mounting it with a different name in Hugo).

1 Like
7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.