New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
What controls whether gatsby-plugin-sass inlines the resulting CSS? #21394
Comments
Hi, It's a bit hard to know exactly what you're doing and what the difference is. Could you post a snippet of how you import your sass file and maybe a full list of plugins? I can't immediately see what's causing this. Sass isn't inlined by gatsby if not mistaken. |
Hi @wardpeet! Of course. I added all of the plugins in my gatsby-config in the original issue, here's the full list of plugins in my package.json:
and this is how I import my sass file: |
This is all I believe I have in either project (and in others that have worked too), and this is what is resulting in the style tag with everything in it inline for one project, but not the other. I actually want this inlining behavior because it's preventing a FOUC but I can't figure out how to make it happen in the project that it's not happening in |
I tried looking into the source of |
I think the problem is your import, can you switch
into
The difference between the two is that |
Wow, @wardpeet that totally fixed it. That's so interesting. Thank you! I've got to find this in the Webpack docs and read more about it. I'm glad it was something that I was doing myself. thank you again! |
More on this topic: Technically you should never use dynamic imports for css |
Totally! I didn’t even know that was what I was doing! Thank you :) |
Summary
I have two different Gatsby projects that I believe to be as similar as they could be without being identical, but one of them is getting a FOUC when deployed on Netlify and the other isn't. I think I've narrowed it down that the good one without FOUC is getting inline CSS like this (attached) but the other one isn't:
In the other project, I do not even see a style tag, weirdly enough! I can't figure out what the difference is that is causing one to use inline styles on
gatsby build
and the other to not.Relevant information
In both projects, I am importing the sass file like this, in the layout.js file:
import("./../stylesheets/index.sass")
Both updated to the latest packages, both with configs like what you see below.
File contents (if changed)
gatsby-config.js
:package.json
: N/Agatsby-node.js
: N/Agatsby-browser.js
: N/Agatsby-ssr.js
: N/AThe text was updated successfully, but these errors were encountered: