Gatsby: CSS styles do not load after deploying to Surge or Netlify

[DanStockham]

Description

CSS styles are loading when running 'gatsby develop' however, when deploying to Netlify or Surge, the styles do not load. Here are some of the solutions I tried:

• setting gatsby-plugin-sass to 1.0.19
• re-deploying to Netlify with build cache cleared
• removing the yarn.lock file to force netlify to use npm
• removing the netlify site altogether and creating a new one.

These solutions don't seem to correct the issue of the styles not loading. Also I tried deploying to surge.sh and I'm still getting no-styles deployment.

I'm pretty befuddled at this point even after looking at similar issues

Steps to reproduce

Netlify

1. Fork https://github.com/DanStockham/tootles-bar
2. Add site to Netlify
3. Deploy site

Surge

1. Clone https://github.com/DanStockham/tootles-bar
2. gatsby build
3. surge public/
4. Navigate to site

Expected result

Actual result

What happened.

Environment

• Gatsby version 1.9.253:
• gatsby-cli version 1.1.50:
• Node.js version: v8.9.4
• Operating System: Windows 10

File contents (if changed):

gatsby-config.js:

require('dotenv').config();

module.exports = {
  siteMetadata: {
    title: `Tootle's Pumpkin Inn`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-glamor`,
    `gatsby-transformer-remark`,
    'gatsby-plugin-sass',
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
      }
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'src',
        path: `${__dirname}/src/`
      },
    },
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    }],
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "bootstrap": "^4.1.0",
    "dot-env": "0.0.1",
    "gatsby": "^1.9.253",
    "gatsby-image": "^1.0.47",
    "gatsby-link": "^1.6.41",
    "gatsby-paginate": "^1.0.14",
    "gatsby-plugin-glamor": "^1.6.13",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-sass": "1.0.19",
    "gatsby-plugin-typography": "^1.7.18",
    "gatsby-source-contentful": "^1.3.47",
    "gatsby-source-filesystem": "^1.5.32",
    "gatsby-transformer-remark": "^1.7.40",
    "gatsby-transformer-sharp": "^1.6.23",
    "react-fontawesome": "^1.6.1",
    "react-helmet": "^5.2.0",
    "react-transition-group": "^2.3.1",
    "reactstrap": "^5.0.0",
    "typeface-lobster": "0.0.54",
    "typography-theme-kirkham": "^0.16.3"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.12.1"
  }
}

gatsby-node.js:
gatsby-browser.js:
gatsby-ssr.js:

[KyleAMathews]

Do your styles get created locally?

[ajayns]

@KyleAMathews could this be another case not configuring html.js properly as in #4754 ?

[DanStockham]

@KyleAMathews I did a gatsby build after re-installing my node modules then I pushed it to Surge. It's working there now. I'm still having issues with Netlify.

@ajayns What am I looking for in html.js? When I followed your link, I did come across this issue but what I am changing? Am I declaring stylesStr to my styles.css? Also, how does this resolve the issue with Netlify? If html.js lives in the cache of the gatsby node module, I'll not be able to access it in Netlify unless there is another way.

[zacaytion]

Could this be related to #4418?
I commented with a similar issue there, but it might be better suited here.

[DanStockham]

This morning I read into @ajayns link and got an idea of inserting a link tag with href pointing to my styles.css in the same folder. I inserted it in my index file in the layout folder and pushed it to Netlify. Still no dice

[zacaytion]

I found a fix for my site.
In my layout/index.js i was importing global styles made using injectGlobal function with emotion.
When I removed the globally injected styles all of the other styles appeared normally.

To fix the issue, I applied the global on my top level styled component.
Not sure how this applies to you @DanStockham, since you're using scss.

[DanStockham]

@zacaytion
I gave that a shot but still not getting any styles coming up

I did compare my a previous commit before I added my changes and that works in Netlify. Though, I'm having a hard time finding what I did in that previous commit which made it work.

[DanStockham]

Update
This is definitely a linux issue. I did a gatsby build on my linux machine. The build doesn't have the styles and checking styles.css, my user-defined styles are not there.

I tried every trick and suggestion on this issue. None of them are working. Is there something special on a linux machine I have to do to get this working?

I looked at a previous version I did and it works
There isn't anything different that I can see. Is there any difference that I am not seeing?

Thanks, I'm at my wits end here.

[KyleAMathews]

Linux is case sensitive for filenames so probably you're importing a component that's e.g. uppercase and typing it as lower case which works on Mac but won't on Linux.

[DanStockham]

@KyleAMathews I tried a workaround. Instead having Gatsby doing the sass compling, I ran the sass complier in the command line and imported the complied css in my index layout.

It's working on Netlify. Although, I really want to understand why this is happening on under the hood. I'll start looking the dev version of Gatsby.

[alexwendte]

I can confirm after 4 hours of trying to figure out the same problem that it was a capitalization problem that was preventing Netlify from inserting the inline styles. That was a frustrating problem, but I am glad I found this thread! I almost gave up!

[drake-smith]

@themostcolm What was the capitalization problem you discovered? I am in the same exact situation as all of you and I'm completely stuck and have tried all of the things mentioned in the GitHub issues.

[alexwendte]

@drake-smith Sure! I use stylus, so in my import statement I had @import '../layouts/Header/header.styl' when my actual file layout was src/layouts/Header/Header.styl. It worked perfectly in development, but did not work on Netlify. Also make sure if you are using git that you have the correct capitalization in your git repository. Sometimes if you change the capitalization of the file, git doesn’t recognize that at all. You can do this with: git mv _oldFileName newFileName_

[drake-smith]

@themostcolm Thank you!

@DanStockham Could you walk through what steps you took for your Sass compile workaround? I've discovered the same issue in that my Sass doesn't compile in a Linux environment (Netlify). You're running sass in command line, and removing any webpack Sass commands from gatsby-config?

[deadcoder0904]

I've also found same issue with my site & it isn't loading CSS on first load as you can check. And I'm using Emotion. Any solutions @KyleAMathews ❓

Solutions mentioned here don't work for me sadly :(

[deadcoder0904]

I've got it. I opened up a new issue #6406

[rishichawda]

@deadcoder0904 did you solve the issue? I'm facing the same problem. On first load it doesn't load all the styles but on visiting some other page via some internal links on the page it applies all the styling. I'm using styled-system and rebass for styling so i don't have any external sass files.

Note: Everything was working fine with Gatsby@1.

Thanks in advance!

[deadcoder0904]

@rishichawda I don't remember what I did to solve it but I think everything must use @next if you're using v2. So I must've used emotion@next & rest all plugins might have been converted to use @next versions.

That might be the solution. Everything is working fine now for me :)

[rishichawda]

@deadcoder0904 I had updated all the plugins to use @next while migrating to v2 from v1 ( except for a few plugins which for which npm failed to recognize ( or find ) the @next version - gatsby-node-helpers, gatsby-plugin-stripe-elements and shopify-source.) Rest all are using @next.

[deadcoder0904]

I checked those 3 you mentioned & it looks good so I think you are definitely missing something. Can't help it unless there is something specific.

I remember now that my error was I wasn't using v2 of emotion gatsby plugin & I think I had to clear Netlify cache since I was using https://github.com/axe312ger/gatsby-plugin-netlify-cache which uses previous cache to speed up deployment. So those 2 were my problems.

I think you will find answer if there is something relevant you can post or else you checkout example sites made using rebase & styled-system. I did it that way. Sorry I don't have a solution for you :(

[rishichawda]

No problem! Thanks for sharing. I'm waiting for the issue to be fixed ( hopefully ) in future updates of gatsbyv2.

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[osogrizz]

I just ran into this today. I built the site with Gatsby v2 but my css is not being applied on initial load. I've looked at the solutions linked here but no luck so far. I'm using emotion. I have another site that I updated from Gatsby v1 and that site is using styled components without any issues?

[maxmatthews]

Having the same issue. My git repo is here: https://bitbucket.org/maxmatthews/codecommunity and my site is https://codecommunity.io
Attempting to use the Stellar starter theme which I upgraded to use Gatsby v2. On mac with gatsby develop, the site loads fine (note the white text):

But as soon as I run gatsby build or deploy to netlify it looks like this:

The interesting thing is if you go to any other page like https://codecommunity.io/thanks and then click on a link to the homepage, it renders the CSS fine. Have to be missing something here...

[iljapanic]

I have the same problem as @maxmatthews. I found several issues related to this with no definitive fix.

[liamdanielduffy]

@rishichawda @osogrizz

I'm also using styled components. This was fixed for me as soon as I added the Gatsby styled-components plugin to my build, using the steps outlined here:

https://www.gatsbyjs.org/docs/styled-components/

Before fixing this, my styles wouldn't load on my first page load, until I navigated to another route. Now everything loads the first time.

[osogrizz]

@liamdanielduffy @rishichawda

After reading everything I could find, contacting Netlify, and struggling with removing service workers per their advice, I decide to start over and slowly rebuilt my site to see what it could possibly be.

I did install the plugins correctly so i was good on that end. My confusion is primarily that styling was applied correctly in development but in production could only be (inconsistently) forced to apply by redirecting manually to another page. After rebuilding the site there are slight differences with how I used the layout component making direct comparison impossible. One other difference is that I went with styled-components vs emotion. Everything works as expected now.

I have since begun adding media queries and did notice that if I used more complex queries I had similar behavior but with no way to force the actual styles to be applied. Enough to get me thinking this is related but not the same issue. After cleaning up my queries, there are no issues.

[justinformentin]

I wanted to chime in to say that I'm having the exact same issue. Using Gatsby v2, using Emotion. All is good in dev, but once built there are no styles being displayed unless following an internal link. Working on trying to fix it now.

Update: Just switched entire project over to styled-components. Didn't do anything. Then I tried going back to the dev server, and I was getting the same issue. So I went back to a known good version of the repo (with Emotion) and tried the dev server and it worked. So I tried building it and it worked.

So I don't know exactly what I did wrong but I clearly messed something up. Between the known good version and the no-style version, I added proptypes and I might have changed a few little things here and there, but not enough that it would ruin it in the way that it did. So I'm really not sure what the issue was. Maybe I'll go back over when I've slept and it'll be obvious.

[gzhihao]

@justinformentin Did you try adding 'gatsby-plugin-emotion' to your gatsby-config.js? I had exactly the same issue like you (not emotion, but styled-component), after I added 'gatsby-plugin-styled-components' (according to @liamdanielduffy's comment) in the plugins config, the production build worked as normal.

If this is a common issue, it might worth adding warning message in dev mode.

[jontewks]

We are running into a similar issue but what we were seeing was only a single component was not having the styles applied to it until navigating to another page and back. We are using all the very latest packages and plugins. We are currently using glamorous and gatsby-plugin-glamor.

I was doing some troubleshooting and found that if I moved the component experiencing the issue further up in the tree of its parent, more components were being affected by missing styles.

I ended up finding a fix for the issue we were experiencing. The component which wasn't getting the styles applied to it right away has a componentWillMount lifecycle method which would set state based on some logic. Simply changing it to componentDidMount instead removed the issue entirely. I recall that usually you'd try to avoid calling setState inside of componentDidMount since it will run the render method twice, but that seems to be what fixed this issue for us. I'm not sure if this is at all related to the above issues but figured I'd throw it out there as yet another thing to try if anyone else is experiencing this or perhaps it will help lead to the final trackdown of whats going on.

Additional Info:
I continued to troubleshoot and found another way to solve the issue that hopefully will shed some light on the underlying cause.

The component having the issue has a default state of { showBanner: false } and in the componentWillMount will sometimes set showBanner in state to true. In the render method the first line is

if (!this.state.showBanner) { 
  return null 
}

I tried changing the return null to return <div /> with no change. I also tried always returning the same <div> but instead of setting display: flex on the <div> always I changed it to display: ${this.state.showBanner ? 'flex' : 'none'}. Interesting thing about that change was that the issue was still present but the styling of the broken component was different, it was closer to what it should have been but still messed up. I found that always returning the same <div> with the same css applied but instead when state.showBanner was false I just didn't put any content into the <div> and when true filled the <div> with the normal content like so:

return (
  <div className={...>
    {this.state.showBanner ? <BannerContent /> : null}
  </div>
)

This seems to have fixed the issue as well and doesn't require us to setState in componentDidMount, but I don't see a big deal either way in our particular case.

Good luck everyone!

[justinformentin]

@gzhihao Yes, I made sure I was following all of the config rules and I tried both emotion and styled-components. Never ended up figuring it out because I thankfully had a working backup which I switched to for time saving's sake.

[gzhihao]

I encounter similar issue lately again. The styling issue only happen in production build when I accessed the page directly from the url. If I navigate from other page, it's just fine.
It turned out I forgot to import one of the css file in that page, while other pages have that import.

[lbittner-pdftron]

I had the same issue as well and eventually found I had the same problem as @gzhihao. I was using CSS classes that weren't imported on that particular page.

[bjankord]

I just ran into a similar problem as @gzhihao mentioned. In production, if I navigated to a specific page, it would only load CSS I had required in gatsby-browsers.js, but would fail to load CSS I had imported in src/pages/index.js. However, it would work if I started on the homepage, and navigated to said page. The site is hosted on netlify.

I'm testing moving my main styles.css I imported in src/pages/index.js to gatsby-browsers.js to see if that resolves it.

Edit: This seemed to resolve the issue for me.

[jsnhall]

I also had the same issue running Styled Components on Netlify. Installing gatsby-plugin-styled-components and adding it to my config file did the trick.

Note: I had to clear my browser cache to see the changes.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[miguelpduarte]

For those that might be using Material UI and running into this problem, it was simply a matter of installing gatsby-plugin-material-ui for me! :smile:

[blainekasten]

25729