First, if you want to use Sass in your Gatsby project, you need to install the gatsby-plugin-sass and a sass compiler dependency to convert your .scss files to CSS. The popular node-sass is now deprecated, so you should be installing the dart-sass package. 
npm install sass gatsby-plugin-sass

plugins: [
      `gatsby-plugin-sass`
],

Then can write your styles in.scss or .sass files and import them into any component file as usual.

Now to adding global styles. There are two ways to add global styles that you’ll like to use across several component or style files in Gatsby: via the layout component or the gatsby-browser.js file.

Using the layout component

Every new Gatsby project ships with a default file titled layout.css and layout.js in src/components folder. Rename layout.css tolayout.scss and write your global styles in it. Then update the import command in layout.js. 
import “./layout.scss”
If your Gatsby site doesn’t have those two files, create them in the src/components folder and do the same. This will make all the variables, functions, and mixins in the layout.scss file globally available.

Using gatsby-browser.js

If you don’t want to provide global styles via the layout file, create a file named gatsby-browser.js in the root of your project folder if it doesn’t exist already. 

Create your global stylesheet file and define styles as desired, then import the file into the gatsby-browser.js file: 
import "./src/styles/global.css"

Blog Credits: Linda Ikechukwu

” Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. “