[Next.js] My Bootstrap navigation component is not recognizing my custom CSS

1

I am rewriting 1 of my vanilla websites into next js. I am having a problem with the styling of my navigation component. I think I narrowed it down to what the problem is, I’m just not quite sure why it’s happening.

I am using react bootstrap with custom CSS. It seems that the bootstrap component style is overriding my custom CSS. You really notice it when you select 1 of the navigation items. It’s only using the bootstrap CSS.

This is what my navigation bar is supposed to look like: https://i.imgur.com/Jckl5ZR.png

Here is the console output: https://i.imgur.com/uu4wGEb.png

Now when I try to rewrite this into my next.js application I get something that looks like this: https://i.imgur.com/QkD3cMA.png

Console output:https://i.imgur.com/f1VczbJ.png

As you can see, the CSS I have written is not being recognized at all. I have a feeling bootstrap react is overriding but I’m not sure what I’m supposed to do. Below I will link a picture of my package.json and a gist of the component itself.

Package.json: https://i.imgur.com/1b9Pvzh.png

_app.js: https://i.imgur.com/ujFslNW.png

Gist: https://gist.github.com/parkerfoshay/e18db775e596e216893943982ede88d7

P.S. I know why the brand part of the navigation bar is not styled right. I am more worried about why my anchor tag is not being styled.

Thank you!

2

Solution: Do you have withCSS set up in your next.config.js ? https://github.com/vercel/next-plugins/tree/master/packages/next-css

Example: https://github.com/mxro/next-js-react-bootstrap/blob/master/next.config.js