What controls whether gatsby-plugin-sass inlines the resulting CSS?

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:

module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    {
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "www.XXXXXXXXXXX.com",
        protocol: "https",
        auth: {},
        cookies: {},
        verboseOutput: false,
        perPage: 100,
        searchAndReplaceContentUrls: {},
        concurrentRequests: 10,
        includedRoutes: ["**/categories", "**/tags", "**/posts"],
        keepMediaSizes: true,
        normalizer: function({ entities }) {
          return entities
        },
      },
    },
  ],
}

package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[wardpeet]

I think the problem is your import, can you switch

import("./../stylesheets/index.sass")

into

import "./../stylesheets/index.sass"

The difference between the two is that import() tells webpack to make this a async import so it will give you fouc.

[wardpeet]

More on this topic: https://webpack.js.org/guides/code-splitting/#dynamic-imports

Technically you should never use dynamic imports for css