Apparently I'm still a little confused on mounting & importing something like Boxicons to my main.scss

support
1

Greetings Hugonauts!
I’m making good progress in converting a Bootstrap 5 template for use with Hugo, but have run into a snag. The Bootstrap template I’m using makes use of Boxicons. I have installed it in my Hugo project via NPM (as I did with Bootstrap). It now shows up as a dependency in my package.json

I also plan to bundle all of my css and scss together for post processing so I get one css file in my static pages. I believe I got that set up correctly and changed I make to scss components (like base/_variables.scss ) are reflected in my localhost:1313

I’ve added this to my config.toml

[[module.mounts]]
    source = 'node_modules/boxicons/css/boxicons.min.css'
    target = 'assets/css/boxicons/'

(I’m not sure if that is correct, first of all. I don’t think I conceptually “get” these module.mounts yet.)

Then, my assets/sass/main.scss is the file that does all of the @imports
I have tried multiple ways to import it, including

@import '../../node_modules/boxicons/css/boxicons.min.css';

Looking at the documentation page for Boxicons, and looking at the Bootstrap template that I am converting to Hugo, it appears that it is using Boxicons as a Font. But I don’t want to use their CDN link, I want to use the node_module I have installed.

What am I missing here?
Link to my repository: https://github.com/darrenaddy/mybootstrap5x.git

Thanks in advance for any answers. Hopefully the answers will help me to use this library and others in the same fashion - once I get this through my thick skull.

2

Hmmm. It appears that I have no go.mod in the root of my project, so I must have forgotten to init the project as a Module (which I believe is a prereq for any of them to work). BRB

4

Sorry, that I’ve deleted my last post. It was not because of the idea behind it how to import the css in main.scss (that works) but because the result is weird. You get an import with absolute path to the imported css file in your main.css that won’t work online. More a SASS issue.

5

I must have forgotten to init the project as a Module

This :point_up_2:, but also I think you need to change the target to
assets/css/boxicons/boxicons.min.css

6

Thank you for the reply.
Do you mean in my module.mounts? That IS the target:

[[module.mounts]]
    source = 'node_modules/boxicons/css/boxicons.min.css'
    target = 'assets/css/boxicons/boxicons.min.css'
7

Do you mean in my module.mounts?

Yes, that looks correct.

8

Still confused, so resisting opening a new thread and adding to this one. This tutorial on " Hugo package management - import and include upstream CSS and JS in Hugo – Automatically add JQuery, Font Awesome and Bootstrap using NPM" is EXACTLY what I want to do. So trying to follow his example (using JUST Bootstrap, for starters).

Build fails on the first @import and I don’t understand why. But I also don’t understand why his final “and its mounted to:” line includes the themes folder. It appears all the paths he uses (and I use) should be referencing the root project assets folder. In fact, I thought that is the only place an assets folder should be found.

Here is a composite of his instructions (which I am attempting to replicate) and my file structure using those paths. What am I missing here?

You will want to open this image in a new tab and expand.

JanakSinghModuleMountsX
JanakSinghModuleMountsX660×1076 80.6 KB