Working example of Hugo Modules and Bootstrap .scss files?

support
1

Hello,

I’m trying to get started with Hugo Modules and, while I think I’m close, I’m not there yet. I’ll wager there are others in the same boat. Employing Modules in order to make use of Bootstrap .scss files seems like a very practical and widely applicable place to start. Here’s my setup (and then the errors i’m hitting).

config.yaml

module:
  imports:
    - disable: false
      path: github.com/twbs/bootstrap
      mounts:
          - source: scss
            target: assets/scss/vendor/bootstrap

I ran the following command:

hugo mod init github.com/twbs/bootstrap

Which generated a go.mod file which looks like this:

module github.com/twbs/bootstrap

go 1.13

Directory structure

└── assets
    ├── js
    │   ├── main.js
    │   ├── vendor
    │       └── bootstrap
    └── scss
    │   ├── customize-bootstrap
    │   │   ├── custom.scss
    │   │   ├── includes.scss
    │   │   └── variables.scss
    │   ├── main.scss
        └── vendor
            └── bootstrap # Proposed “Virtual” (for lack of a better word) mount location of all Bootstrap .scss files

assets > scss > customize-bootstrap > includes.scss

// Configuration

@import "functions";
@import "variables";
@import "mixins";
@import "utilities";


// Layout & components

@import "root";
@import "reboot";
@import "type";
// etc. etc. etc.

And here’s the error message I keep hitting:

Transformation failed: SCSS processing failed: file "…assets/scss/customize-bootstrap/includes.scss": File to import not found or unreadable: functions.

I’m probably wrong, but i think the main problem is that i don’t know how to properly locate the mounted .scss files with my @import calls. I’ve tried loads of different ways:

  • @import /assets/scss/vendor/bootstrap/functions
  • @import assets/scss/vendor/bootstrap/functions
  • @import vendor/bootstrap/functions
  • @import functions
  • @import _functions.scss
  • etc.

I’d love to get this working and i’m sure others would benefit from a real-world example, too. Thank you for any thoughts and input.

1 Like
2

Locating the files is not the issue. I can perform the imports without any problem if I just download the .scss files. Somehow, they’re just not available for me via Hugo Modules. :man_shrugging:

3

Hey, better late than sorry. I had some other related issues trying to use one of the later 4 versions of Bootstrap as a module in Hugo.

I created this to hopefully make this simpler:

I will create proper versions, but it would be good if you could take it for a spin and tell me if it works for you.

1 Like
4

bep, I feel like a jerk that i haven’t replied here yet. It was really kind of you to put this together. At the time you posted, I was traveling. And then shortly after the world fell apart (my wife and I launched a new school this year for the children in our community; it’s been a wild ride trying to support our students remotely). In any case, i’m really sorry it’s taken this long to get back to this discussion.

I think my problem is that i’m still missing some fundamental understanding of Hugo modules.

Here’s what i’ve done so far:

  1. Added this to my config.yaml file:
module:
  imports:
    - path: github.com/gohugoio/hugo-bootstrap-scss-v4

  1. Run this command:
    hugo mod init github.com/gohugoio/hugo-bootstrap-scss-v4

  2. Which created a file called go.mod which includes this:

module github.com/gohugoio/hugo-bootstrap-scss-v4

go 1.14

  1. Included in my directory structure is:
    assets > scss > bootstrap

  2. I am running Hugo version 0.69.2/extended and Go version 1.14.2.

When I run the server, I get an error like this:

Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss): SCSS processing failed: file "...assets/scss/bootstrap-includes.scss", line 2, col 1: File to import not found or unreadable: bootstrap/functions.

bootstrap/functions is, of course, the first of many Bootstrap SCSS files I am attempting to import.

I have to be missing something obvious…

5

The above should be the path to YOUR module.

I tested Bootstrap 4 when I created the above some time ago, I will see if I can find that repo and push it somewhere.

6

OK, I found the repo:

https://github.com/bep/algolia-test

Tested it now. It’s not doing much, but the setup could be … “insparational”.

7

My site is building! Thank you!!

One note…

Until I changed:

module:
  imports:
    - path: github.com/gohugoio/hugo-bootstrap-scss-v4

to:

module:
  imports:
    - path: github.com/gohugoio/hugo-mod-bootstrap-scss-v4

I was getting this error:

Error: module "github.com/gohugoio/hugo-bootstrap-scss-v4" not found; either add it as a Hugo Module or store it in "[themes directory]".: module does not exist

I may me mistaken in making this change, but since it’s a deviation from what’s specified in the README.md file, I thought it worth mentioning.

8

Oh, I’m sorrty about that. I guessed I changed the repo name after I wrote the README. It’s fixed now, and thanks for the correction.

1 Like
9

Whenever you can come up for air, this will be a really exiting and helpful addition:

This repository will be versioned following the minor and patch versions in the v4 series of Bootstrap.

Thanks again for all your work to make this a reality!

10

I assume that is from the README. I must admit that I don’t follow the release cycle of Bootstrap, but I do accept pull requests with version updates. Then I can tag it appropriately.

I must admit that the workflow for Hugo Modules lacks some refinement …

11

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