Gatsby Global SCSS not being applied

Question

My Gatsby project's styling from global.scss file is not being applied.

I have a global stylesheet called global.scss that is located in src/styles/ and then I am also using component-scoped scss modules.

In my gatsby-browser.tsx file, I am importing the global file like so:

import './src/styles/global.css'

However, this does nothing. I am not getting my styles from that file applied to any of my pages. Why won't importing a global stylesheet actually work? I've tried it with plain css instead of scss to no avail...

Here is my gatsby-browser.tsx file

import * as React from 'react'
import { PrismicProvider } from '@prismicio/react'
import {
  PrismicPreviewProvider,
  componentResolverFromMap,
} from 'gatsby-plugin-prismic-previews'
import './src/styles/global.scss'
import { GatsbyBrowser, Link } from 'gatsby'
import { linkResolver } from './src/utils/linkResolver'
import IndexPage from './src/pages'
import PageTemplate from './src/pages/{prismicPage.url}'
import ArticleTemplate from './src/pages/{prismicArticle.url}'

interface Props {
  element: React.ReactNode
}

const wrapRootElement: GatsbyBrowser['wrapPageElement'] = ({
  element,
}: Props) => (
  <PrismicProvider
    internalLinkComponent={({ href, ...props }) => (
      <Link to={href} target={props.target} rel={props.rel}>
        {props.children}
      </Link>
    )}
  >
    <PrismicPreviewProvider
      repositoryConfigs={[
        {
          repositoryName: process.env.PRISMIC_REPO_NAME ?? '',
          linkResolver,
          componentResolver: componentResolverFromMap({
            homepage: IndexPage,
            page: PageTemplate,
            article: ArticleTemplate,
          }),
        },
      ]}
    >
      {element}
    </PrismicPreviewProvider>
  </PrismicProvider>
)

export default wrapRootElement

Answer 1

Have you tried importing it in your Layout component? Despite your approach should work the preferred way (according to the docs) is through the Layout component:

import React from "react"
import "../styles/global.scss"

export default function Layout({ children }) {
  return <div>{children}</div>
}