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
.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 to
layout.scss and write your global styles in it. Then update the import command in layout.js.
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.
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
Blog Credits: Linda Ikechukwu