Upgrading from bootstrap4 to bootstrap5 breaks ToCSS when using hugo serve

I’m trying to upgrade a theme from bootstrap 4 to 5. When I upgrade the node_module using yarn, then try to start hugo serve, I get the error:

hugo serve
Start building sites … 
Built in 2057 ms
Error: Error building site: TOCSS: failed to transform "sass/main.scss" (text/x-scss): SCSS processing failed: file "stdin", line 34, col 3: Undefined variable: "$i". 

If I just build the site with hugo it seems to compile fine, no errors. The rendered site looks OK.

The theme is here: Files · bootstrap5 · pixlsus / hugo-bootstrap-bare · GitLab

Can anyone help?

1 Like

If you just changed bootstrap4 with bootstrap5 in assets/package.json then your sass-import is probably wrong. the files to import changed.

The error you are receiving come up when Hugo receives “nothing” from the SASS output. You should try to run sass with your theme file and fix the upcoming errors.

I had outputstylle expanded and the latest version seemed not to like that. I changed it to compressed and now it works.

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