Order of module mounts for assets is wrong

[moebiusband73]

Not sure if this belongs here.

With the current ./config/_default/module.toml it is not possible to overwrite parts of the doks theme because the local assets directory is mounted last. To allow overwrites it has to be mounted before the mounts in the doks-core folder.

[h-enk]

Can't replicate.

Added to assets/scss/common/_variables-custom.scss

// Put your custom SCSS variables here

$font-family-base:            var(--#{$prefix}font-monospace);

And, to assets/scss/common/_custom.scss:

// Put your custom SCSS code here

@include color-mode(dark) {
  body {
    background: blue;
  }
}

[moebiusband73]

Hi, thanks for the quick response! Maybe I am just to stupid. What I tried is to set the $primary variable which is purple by default to another color. I was thinking this is possible by overwriting ./scss/common/_variables.scss (putting it in my assets folder). This would be the Hugo way to do it. Still due to the order folders are mapped in module.toml this does not work. I already tried to do this by setting $primary in the provided _variables-custom.scss, and tried again now. But it this does not work for me. Can you try to overwrite $primary. Thanks for your help, Jan

[h-enk]

You're right, some things don't work right/as you would expect — addressed in/part of https://github.com/gethyas/doks-core/issues/68

In short, it's got something to do with cross-references and duplicate definitions.

This is how you would make it work for now — in assets/scss/common/_variables-custom.scss:

// Put your custom SCSS variables here

// Light mode
$primary: $db-vermilion-100;

// START (temporarily) necessary duplicate code

// Links
//
// Style anchor elements.

$link-color:                              $primary;
$link-decoration:                         none; // underline (default)
$link-shade-percentage:                   20%;
$link-hover-color:                        shift-color($link-color, $link-shade-percentage);
$link-hover-decoration:                   underline; // null (default)

// scss-docs-start theme-colors-map
$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);
// scss-docs-end theme-colors-map

// END (temporarily) necessary duplicate code

// Dark mode
$link-color-dark:   lime;
$button-color-dark: lime;

I will keep this issue open — until properly solved

[salim-b]

I suspect the root of this issue lies in how Hyas/Doks tries to use Hugo's mounts feature. I tried to point that out in this comment on a related discussion.

Summary:

Multiple mounts within the same Hugo module (incl. the top-level project) with target = "assets" are not guaranteed to work reliably, i.e. the overlaying seems random[^doc]. Future improvements to Hugo's mounts behaviour might improve on this situation according to Hugo's lead dev, but currently it's pretty-much broken.

(...) apparently Hugo does merge assets correctly between imports but not necessarily between multiple mounts in the same module.

(...) I think Hyas should switch to properly set up Hugo modules and stop managing Hugo dependencies via npm. Hugo's assets component folder merge behaviour is currently a pain.

[^doc]: It's likely no coincidence that the merge behaviour of assets – in contrast to all other relevant component folders – is not documented (additionally, that doc hasn't been updated to mention modules; too many Hugo devs really hate properly documenting the awesome shit they throw at us uninitiated fools 🙄).

See this post on the Hugo forum for what I mean by "the overlaying seems random". To properly debug this issue, you would first have to dive into Hugo's Golang source code and understand how exactly the overlaying of the assets component folder within a module currently works. Because this is largely "uncharted territory" as a statement from bep (Hugo lead dev) suggests:

For the order of mounts within a module I only remember adding test case for content (where the languages makes this interesting/relevant); I have never ever had a use for overlapping /assets mount in the same project, so I haven’t cared too much.

[Drilio]

I think I found out why, but I can be wrong, in hugo.toml (new config.toml) do you have those two lines :

[permalinks]
  blog = "/blog/:slug/"
  docs = "/docs/:sections[1:]/:slug/"

[h-enk]

Related to:

• https://github.com/gethyas/doks-core/issues/82
• https://github.com/gethyas/doks-core/issues/68

[h-enk]

Merged. Closing — reopen if necessary