Bootsatrap navbar for gatsby project

user_13154216 0
Viewed 31

I want to use bootstrap (v.5) navbar for a Gatsby project. In principle, it is possible to load components that only belong to the navbar. However, I can't find any information about which components belong to the navbar.

So far these I have these imports but not yet working unfortunately: global.scss

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/_nav";
@import "../../node_modules/bootstrap/scss/_navbar";

Has anyone done this before? Do you know which components need to be imported to make it work?

Thanks for any help!

navbar gatsby sass
1 Answers

I importing it to gatsby-browser.js. Shouldn't it be here?

Yes, that's one option. As well as importing it in the Layout component as the Standard Styling with Global CSS Files suggests.

The problem I guess is the path you're using. From the gatsby-browser.js there's no ../.. path hence the route and the asset is broken.

Try playing around with the path but I bet you can do directly something like:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/_nav";
@import "bootstrap/scss/_navbar";

Note that ./ should also work in the same way so try playing around with the relativity of the paths.

user_55853710
Related