Asset mounted by theme config not available in site

support
1

I have a theme with mounts in config.yaml:

module:
  mounts:
  # Default mounts
  - source: "archetypes"
    target: "archetypes"
  - source: "assets"
    target: "assets"
  - source: "content"
    target: "content"
  - source: "data"
    target: "data"
  - source: "i18n"
    target: "i18n"
  - source: "layouts"
    target: "layouts"
  - source: "static"
    target: "static"
  # Bootstrap
  - source: "node_modules/bootstrap/dist/css"
    target: "assets/paige/bootstrap"
    includeFiles: ["/bootstrap.css"]
  - source: "node_modules/bootstrap/dist/js"
    target: "assets/paige/bootstrap"
    includeFiles: ["/bootstrap.bundle.js"]
  - source: "node_modules/bootstrap/js/dist"
    target: "static/paige/bootstrap"
  - source: "node_modules/bootstrap/scss"
    target: "assets/paige/bootstrap"

I have this package.json checked in for the theme module:

{
  "comments": {
    "dependencies": {
      "bootstrap": "project",
      "bootstrap-icons": "project",
      "katex": "project"
    },
    "devDependencies": {}
  },
  "dependencies": {
    "bootstrap": "^5.3.0-alpha1",
    "bootstrap-icons": "^1.10.3",
    "katex": "^0.16.4"
  },
  "devDependencies": {}
}

And this package.hugo.json:

{
  "dependencies": {
    "bootstrap": "^5.3.0-alpha1",
    "bootstrap-icons": "^1.10.3",
    "katex": "^0.16.4"
  }
}

In a site that imports that theme, I ran hugo mod npm pack to generate this package.json:

{
  "comments": {
    "dependencies": {
      "bootstrap": "github.com/willfaught/paige",
      "bootstrap-icons": "github.com/willfaught/paige",
      "katex": "github.com/willfaught/paige"
    },
    "devDependencies": {}
  },
  "dependencies": {
    "bootstrap": "^5.3.0-alpha1",
    "bootstrap-icons": "^1.10.3",
    "katex": "^0.16.4"
  },
  "devDependencies": {}
}

OK. Makes sense.

However, when I run hugo server, I get an error saying that bootstrap.scss (originally in node_modules/bootstrap/scss in the theme module) isn’t in assets/paige/bootstrap, the directory that node_modules/bootstrap/scss was mounted as:

❯ hugo server
Start building sites … 
hugo v0.111.1+extended darwin/amd64 BuildDate=unknown
Error: Error building site: TOCSS-DART: failed to transform "paige/bootstrap/paige.scss" (text/x-scss): "/var/folders/bx/qk0phsxd265fqj512dnnpg080000gn/T/hugo_cache/modules/filecache/modules/pkg/mod/github.com/willfaught/paige@v0.46.1/assets/paige/bootstrap/paige.scss:4:8": Can't find stylesheet to import.
Built in 1550 ms

Copying the module mount config from the module’s config.yaml to the site’s config.yaml fixes the error. Is this expected? There’s no indication in the hugo mod npm pack documentation that you have to manually copy mount config from theme to site.

How can I have the theme module “do” all its work, and make that available in the shared/layered working tree, without requiring importers to copy and paste a bunch of mount config?

Edit: For some reason, this isn’t a problem with the exampleSite in the theme module.

2

Ping :pray:

3

See Do the mounts in an imported module's config.yaml need to be copied into your module's config.yaml? - #22 by will.

It’s expected behavior. hugo mod npm pack is only useful for importing modules where the importer knows that it must do something with the installed packages. It’s probably only useful for themes in the /themes/ dir. I’m abandoning use of pack.

4

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