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!
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.