NextJS, global css styles not applying to the elements

82 Views Asked by At

I've made a blog using nextJS loading markdown files as posts on the main page. I'm using css modules plus the global.css file. However some of the properties of the global.css file seem to no be applying despite the functional aspect working fine. The output is the same on any browser.

demo of the bug

As you can see in the screenshot, in the dev tools the main selector has some properties but only the padding is applying. The color, for example is not applying at all.

I'm loading the global css file according to the standard:

how i load the global css file

However I have two errors that seem to be unrelated:

devtools console errors

  • Failed to load resource: the server responded with a status of 404 (Not Found) - projection.png:1: strange because i don't use any projection.png picture, but may be related to threeJS?
  • Warning: Received true for a non-boolean attribute 'con'.: which is coming from feather-icons

I tried applying styles using the global css file on NextJS, and was expecting them to apply correctly to my elements.

0

There are 0 best solutions below