Customizing Bootstrap 4 with Hugo Pipes

I wrote a small guide to customize Bootstrap using Hugo pipes here:

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
You can see it in action here:

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.


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

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.