Docsy as Hugo module: importing SCSS bits

[dholbach]

Hello everyone,

We would like to move to Docsy as a Hugo module for our website, but are currently doing this

@import "../../themes/docsy/assets/scss/main.scss";

in our own assets/scss/main.scss file to be able re-use some of the definitions in Docsy.

Does anyone of you have successfully done this in your setup? From what I've read, I should be able to do this through module.mounts definitions in my config.toml, but so far no luck.

Any tips would be much appreciated!

[dholbach]

fluxcd/website#1010 is my current attempt to move to Docsy as Hugo module.

[jmichelgarcia]

If you use Docsy as a Hugo module, you do not need to import the SCSS from the theme.

[dholbach]

We re-use definitions such as $btn-border-radius in our SCSS assets, which lead to this:

Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss): "/home/daniel/dev/website/assets/scss/_buttons.scss:3:24": Undefined variable: "$btn-border-radius".

[jmichelgarcia]

I see you are not using

assets/scss/_styles_project.scss is where you can add your own custom SCSS styles, including overriding any of the styles in Docsy’s theme SCSS files.

as per https://www.docsy.dev/docs/adding-content/lookandfeel/#project-style-files

Did you give that a try?

[dholbach]

Sorry, I should have been more clear. The definitions we would like to refer to are from Bootstrap, so e.g. media-breakpoint-down or btn-border-radius.

[dholbach]

Nevermind, I found the right way to do it: fluxcd/website#1136

Essentially what I tripped over was:

1. Having contentDir still defined.
2. When adding a mount for the docsy module, I missed to re-define all default mounts.
3. ... probably more ....