TOCSS error during compilation from mounted repository. Folder name /vendor/ vs. /vendorix/

[GhsvsDe]

Win 10/64, WSL1, Debian-Linux, hugo v0.98.0+extended.

• There is a non-Hugo repo A (“hugo_baseghsvs”) with Bootstrap SCSS in folder node_modules/bootstrap/scss.

• There is a Hugo repo B (“scss-test”)

  • which mounts that folder (scss-test/config.yml at main · GHSVS-de/scss-test · GitHub)
  • and a file /assets/scss/template.scss to be rendered to CSS via ToCSS pipe
  • in layout list.html

• When I run hugo server --disableFastRender --cleanDestinationDir --renderToDisk in repo B I get error:

Start building sites …
hugo v0.98.0+extended linux/amd64 BuildDate=unknown

Error: Error building site: TOCSS: failed to transform "scss/template.scss" (text/x-scss): SCSS processing failed: file "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!g!h!s!v!s-de/hugo_baseghsvs@v0.0.0-20220506155728-d7e2c4126ce2
...

/node_modules/bootstrap/scss/_mixins.scss", line 6, col 1: File to import not found or unreadable: vendor/rfs.

It’s this folder/file: hugo_baseghsvs/node_modules/bootstrap/scss/vendor/_rfs.scss

The weird part:

• When I rename the containing Bootstrap folder vendor to vendorix or so the SCSS compilation works es expected AFTER I’ve changed the @import line in _mixins.scss accordingly (https://github.com/GHSVS-de/hugo_baseghsvs/blob/main/node_modules/bootstrap/scss/_mixins.scss#L6-L8).
• When I rename it back compilation fails.

When the Bootstrap SCSS is directly integrated in repo B (without mounts) there are no issues and SCSS compiles successfully.

Can somebody explain what’s wrong here?

Thank you!

[jmooring]

See https://discourse.gohugo.io/t/moving-to-hugo-modules-with-a-theme-using-scss/37237/6

[GhsvsDe]

@jmooring
I’ve searched so long, found a lot, but didn’t find that thread. Thank you! …but bad news

[GhsvsDe]

For the interested ones. How I solved it in my above described environment.

• In repository A (= Bootstrap SCSS source) leave everything unchanged; as it is.
• In Hugo repo B import repo A and mount Bootstrap SCSS like this:

module:
  imports:
    - path: github.com/GHSVS-de/hugo_baseghsvs
      mounts:
        - source: node_modules/bootstrap/scss
          target: assets/scss/bootstrap

• Create folder in repo B(!): assets/scss/bootstrap/vendor.
• Copy the file _rfs.scss into it.

Now the @import "bootstrap/mixins"; in my template.scss works like expected.

@import "bootstrap/functions";
@import "bootstrap/variables";

@import "bootstrap/mixins";

@import "bootstrap/utilities";
@import "hello";

Not nice, but for now it’s a workable, not too labour-intensive solution.