# Mounting node\_modules from Hugo Module

**URL:** <https://discourse.gohugo.io/t/mounting-node-modules-from-hugo-module/31629>\
**Category:** support\
**Created:** [March 8, 2021, 7:58am UTC](https://discourse.gohugo.io/t/mounting-node-modules-from-hugo-module/31629 "2021-03-08T07:58:10Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nicholasnooney](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicholasnooney/32/13808_2.png) [@nicholasnooney](https://discourse.gohugo.io/u/nicholasnooney)\
**Post date:** [March 8, 2021, 7:58am UTC](https://discourse.gohugo.io/t/mounting-node-modules-from-hugo-module/31629/1 "2021-03-08T07:58:10Z")

</div>

I have a theme module that mounts the `node_modules` folder to include static fonts and static JS in my site, like below:

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

  [[module.mounts]]
    source = "node_modules/feather-icons/dist"
    target = "static/js/feather-icons"

```

I’m able to use `hugo mod npm pack` to download and install the relevant packages when building my site, but since `node_modules` is installed in my site module rather than the theme module that specifies the mount, the `hugo` and `hugo server` commands do not copy the static files in node\_modules.

Is there a way to mount node\_modules from a Hugo Module that I’m missing? I realize that I could specify these mounts in the site module, but that would create dependencies between my modules that I’d rather not have.

(My theme’s mount config was setup as described in [this answer](https://discourse.gohugo.io/t/importing-js-from-node-packages/23545/4)).

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [March 8, 2021, 12:32pm UTC](https://discourse.gohugo.io/t/mounting-node-modules-from-hugo-module/31629/2 "2021-03-08T12:32:33Z")

</div>

Big dirty hack: Add node\_modules to your module package. I don’t see any other way to mount a folder from within a module, that is not inside of that module. If I get this right. Your module.mounts is in the theme and the node\_modules folder does not exist in your theme, right? So that mount won’t work.

---

<div class="post-metadata">

**Author:** ![nicholasnooney](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicholasnooney/32/13808_2.png) [@nicholasnooney](https://discourse.gohugo.io/u/nicholasnooney)\
**Post date:** [March 9, 2021, 6:06am UTC](https://discourse.gohugo.io/t/mounting-node-modules-from-hugo-module/31629/3 "2021-03-09T06:06:21Z")

</div>

Right, the `module.mounts` is in the theme Hugo module, and `hugo mod npm pack` creates `node_modules` in the site Hugo module.

It seems like currently there are two options to support this:

1. Moving the mounts to the site module instead of the theme module (as described by my post).
2. Adding `node_modules` to source control, as described in your post.

It would be nice if there was some extension to the `config.toml` language that could allow specifying mounts of folders in a different Hugo module: something like `module.rootMounts`, which would exactly support this case for using NPM.

This would be less to maintain than a separate repo that wraps the NPM package, as [GitHub - gohugoio/hugo-mod-bootstrap-scss-v4: Bootstrap SCSS v4 packaged as a Hugo Module](https://github.com/gohugoio/hugo-mod-bootstrap-scss-v4) does.

---

<div class="post-metadata">

**Author:** ![nicholasnooney](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicholasnooney/32/13808_2.png) [@nicholasnooney](https://discourse.gohugo.io/u/nicholasnooney)\
**Post date:** [March 10, 2021, 6:44am UTC](https://discourse.gohugo.io/t/mounting-node-modules-from-hugo-module/31629/4 "2021-03-10T06:44:01Z")

</div>

I got inspired by [this post](https://discourse.gohugo.io/t/esbuild-looks-like-we-can-finally-get-solid-hugo-modules-support/28757) to try and bypass the node modules. Unfortunately, [feather-icons](https://github.com/feathericons/feather) doesn’t provide it’s releases directly in a git repo, which `hugo` expects in the config.toml. I ended up biting the dust and setting up my own git repo to hold NPM packages for Hugo modules and I mount them directly from the theme’s `config.toml`:

````auto
[module]
  [[module.imports]]
    path = "github.com/nnooney/hugolibs/feather-icons"

  [[module.imports.mounts]]
    source = "dist"
    target = "assets/feather-icons"```
````

---

<div class="post-metadata">

**Author:** ![nternetinspired](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nternetinspired/32/19706_2.png) [@nternetinspired](https://discourse.gohugo.io/u/nternetinspired)\
**Post date:** [March 10, 2021, 1:11pm UTC](https://discourse.gohugo.io/t/mounting-node-modules-from-hugo-module/31629/5 "2021-03-10T13:11:28Z")

</div>

I’m curious, why would you not just require them in your project bundle? E.g: [GitHub - feathericons/feather: Simply beautiful open source icons](https://github.com/feathericons/feather#node)

---

<div class="post-metadata">

**Author:** ![nicholasnooney](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicholasnooney/32/13808_2.png) [@nicholasnooney](https://discourse.gohugo.io/u/nicholasnooney)\
**Post date:** [March 11, 2021, 4:57am UTC](https://discourse.gohugo.io/t/mounting-node-modules-from-hugo-module/31629/6 "2021-03-11T04:57:42Z")

</div>

I couldn’t require the default feather repo since the code expects to load the compiled icons ([feather/icons.js at master · feathericons/feather · GitHub](https://github.com/feathericons/feather/blob/master/src/icons.js#L2)). I didn’t try to load D3 directly though.

---

<div class="post-metadata">

**Author:** ![nternetinspired](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nternetinspired/32/19706_2.png) [@nternetinspired](https://discourse.gohugo.io/u/nternetinspired)\
**Post date:** [March 11, 2021, 1:39pm UTC](https://discourse.gohugo.io/t/mounting-node-modules-from-hugo-module/31629/7 "2021-03-11T13:39:50Z")

</div>

Oh yeah, that is a bit rubbish!

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [March 11, 2021, 2:00pm UTC](https://discourse.gohugo.io/t/mounting-node-modules-from-hugo-module/31629/8 "2021-03-11T14:00:11Z")

</div>

> [@nicholasnooney](#):
>
> Unfortunately, [feather-icons](https://github.com/feathericons/feather) doesn’t provide it’s releases directly in a git repo

IF you embed the icons via an icon font then yes, it does not supply the icons. But adding all 286 icons in that font to your website is considered “hungry” these days. The user has to download the font the first time he visits the website and first impressions count. The web is one of the places where we want to finish fast 😉

I stopped using fonts and started embedding icons as svg directly. The feather icons are here:

> <https://github.com/feathericons/feather/tree/main/icons>
>
> //github.com/feathericons/feather/tree/main/icons

If you mount that folder you could create an easy shortcode/partial (the shortcode just loads the partial, same repo, one level up, one level down 😉 ) like the one I did for my bootstrap icons module:

[https://github.com/dnb-hugo/libraries/blob/main/bootstrap-icons/layouts/partials/bsicon.html](https://github.com/dnb-hugo/libraries/blob/main/bootstrap-icons/layouts/partials/bsicon.html)

Now your next question will unquestionable be “How can I style the color of the icon?”. The answer is as easy as this:

```sass
.myfeathericon {
  svg {
    width: 15px; // depends on your icons
    height: 15px; // depends on your icons
    line-height: 1; // depends on your icons
    vertical-align: top; // depends on your icons

    path {
      fill: currentColor; // currentColor takes the color from the surrounding element (maybe a link?) but can be a real RGB color
    }
  }
}

```

There is a plethora of styling options for SVG in your CSS, a quick list is here:

> **[SVG Properties and CSS | CSS-Tricks](https://css-tricks.com/svg-properties-and-css/)**
>
> SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.