Gatsby Styles Breaking -- Global CSS file

[dev-lifted]

Hey Guys,

This is my first post here, so forgive me if I am not upfront with anything.

I have a Gatsby site that is being deployed via netlify.

Been running into a very random bug that I have searched the dark reaches of the internet but cannot find the fix for.

Intermediately, the site styles on my website break completely. Upon inspecting, I see my global.css file isn’t being applied. Upon a refresh, this issue goes away.

Site is accessible by this link: https://ellicottrealty.netlify.app/

Upon looking online, I see that I should define the css export in my Gatsby-browser.js file.

I have done so explicitly by writing the following:

const React = require(“react”)

// gatsby-browser.js

import “./src/global.css”

However this is still happening in my app.

Screenshot attached for reference. Any help would be very helpful!

Thanks Guys!

[hrishikesh]

You seem to be using development bundles of your packages and the path to your font css file is also wrong.

[dev-lifted]

Hello,

Thank you for your help, I have followed your advice and have also included the css file in my index.js file within the Helmet Component to hopefully bind this to my site at all times.

However, it still happens and it conflicts with site styles.

This happens very rarely, but about 1x every 20 pagesessions

[dev-lifted]

Video to show issue in visual context.

[perry]

hey there,

unfortunately it looks like you have a lot of errors in your code:

my first question is whether this works locally?