Customizing Bootstrap 4 with Hugo Pipes

tips & tricks
1

I wrote a small guide to customize Bootstrap using Hugo pipes here: https://simpleit.rocks/golang/hugo/customizing-bootstrap-with-hugo-pipes/

Basically you customize the Bootstrap SASS variables, then load the whole package and finally import your custom styles.

In assets/sass/main.scss

@import "custom_variables"; //<-- where BS customization takes place
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "styles.scss"

There is a repo with a basic site and the above method at https://github.com/marcanuy/hugo-pipes-bootstrap
You can see it in action here: https://marcanuy.github.io/hugo-pipes-bootstrap/

I wasn’t able to find a way to include javascript files directly from node_modules directory, creating symlinks didn’t work also, I think it would be related to only being supported at the very first level according to this issue so I have to use a script to copy them to the assets folder before, if there is another way to include them directly please let me know.

5 Likes
2

I found your blog post yesterday and it helped me a great deal, thank you!

3

One way is to mount it into /assets. This way you also get (potentially) simpler import setups:

@import "custom_variables"; //<-- where BS customization takes place
@import "bootstrap";
@import "styles.scss"

Or something.