How to import global SASS with Gatsby

Question

I'm trying to have a global .scss file that gets imported into all pages.

I have the following project structure

/src
  /pages
    index.js
    index.module.scss
    /templates
      /restaurants
        /hungry
          hungry.js
          hungry.module.scss
  /styles
    typography.scss
    variables.scss
  /package.json
    gatsby-plugin-sass
    node-sass
  /fonts
    ...

I tried passing options via gatsby-plugin-sass and also exposing global styles with gatsby-browser.js using this link: Include sass in gatsby globally but no luck.

My typography.scss file

typography.scss

Passing options to gatsby-config.js

My gatsby-config.js file

Error message

Exposing global styles with gatsby-browser.js

gatsby-browser.js

hungry.module.scss

Error message

I've also tried reading the documentation: https://www.gatsbyjs.com/docs/how-to/styling/global-css/

I'm new to Gatsby and completely out of ideas at this point. I appreciate any help.

Thank you.

Ferran Buireu Ferran Buireu · Accepted Answer · 2021-02-12T06:01:58

The approach of using gatsby-browser.js is perfectly valid and it should work, in addition, your paths look correct to me.

Regarding your typography.scss, it clearly seems that the relative paths are not working, try adding/removing relativity using ../../path/to/fonts or ./path/to/fonts.

Another approach that may work for you, is removing the options from your gatsby-plugin-sass plugin and import it as .scss import to the desired file.

Let's say that you fix the issue with the relative paths in your typography.scss (first step). Once done, your .subtitle class file, you can simply:

@import '../../../styles/fonts/typography.scss' use it. Something like:

   @import '../../../styles/fonts/typography.scss
    .subtitle{
       font-family: $font-medium;
    }

So, summarizing. The first step should be to fix the relative font importation and then, import that file directly in the needed .scss files.

Once you comment the manifest plugin (which request a missing asset in the GitHub), it loads the fonts correctly:

Notice the K, quite unique in this typography.

Gatsby uses the path inside /pages folder to build URLs of the pages. You were putting the templates folder inside the /pages folder, causing some weird behavior. Move it outside to fix the issue.

How to import global SASS with Gatsby

1 Answers