Module mounts incompatible with PostCSS import?

support
1

Here’s the a barebones demo repo

This demo repo uses PostCSS and tailwindcss. When trying to use module mounts for a node_module folder (or file) the build fails due to a PostCSS issue:

error calling postCSS: no Resource provided in transformation

The site builds fine if one of these is changed:

  1. Stop using module mounts
  2. Stop using PostCSS

I was able to use them together in a SCSS based Hugo site with PostCSS as specified in the Docs. Is there any chance using module mount changes how PostCSS sees node_modules for importing purposes?

Any idea why this usage of Hugo’s PostCSS fails when using module mounts?

1 Like
2

See https://gohugo.io/hugo-modules/configuration/#module-config-mounts.

When the mounts config was introduced in Hugo 0.56.0, we were careful to preserve the existing staticDir and similar configuration to make sure all existing sites just continued to work.

But you should not have both. So if you add a mounts section you should make it complete and remove the old staticDir etc. settings.

That is immediately followed by this example:

  [[module.mounts]]
    source = "content"
    target = "content"

  [[module.mounts]]
    source = "static"
    target = "static"

  [[module.mounts]]
    source = "layouts"
    target = "layouts"

  [[module.mounts]]
    source = "data"
    target = "data"

  [[module.mounts]]
    source = "assets"
    target = "assets"

  [[module.mounts]]
    source = "i18n"
    target = "i18n"

  [[module.mounts]]
    source = "archetypes"
    target = "archetypes"

I cloned your repo, then edited your config.toml:

[[module.mounts]]
source = "assets"
target = "assets"

[[module.mounts]]
source = "./node_modules/lazysizes"
target = "assets/npmplugins/lazysizes"

Now it builds.

The documentation is a bit cryptic. What I think it means is:

  • If you add a mount where the target root is archetypes/, the default mount of archetypeDir is clobbered (ignored).
  • If you add a mount where the target root is assets/, the default mount of assetDir is clobbered (ignored).
  • If you add a mount where the target root is content/, the default mount of contentDir is clobbered (ignored).
  • If you add a mount where the target root is data/, the default mount of dataDir is clobbered (ignored).
  • If you add a mount where the target root is layouts/, the default mount of layoutDir is clobbered (ignored).
  • If you add a mount where the target root is static/, the default mount of staticDir is clobbered (ignored).
2 Likes
3

Fascinating! I would never have thought that’s what the docs were trying to say as both sentences reference the old staticDir settings.

Thanks for your help. I’m still baffled as to why it would work in a similar repo with SCSS Bootstrap with PostCSS and not TailwindCSS with PostCSS.

Anyway, great finding this mystery workaround and thank you for your thorough explanation.

4

This isn’t a workaround. This is, apparently, how it must be done. :slightly_smiling_face:

You’d have to examine the differences, because “similar” is not the same as “identical.” :slightly_smiling_face:

1 Like
5

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