1

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.

Jovil Hiew
  • 15
  • 1
  • 8

1 Answers1

0

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:

enter image description here

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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • I can't change the path to fonts because they are also used in the index.js file. – Jovil Hiew Feb 12 '21 at 11:34
  • > Regarding your typography.scss, it clearly seems that the relative paths are not working... I can't change the path to fonts because they are also used in the index.js file. I tried importing them like you suggested but I get this error: ```Can't resolve '../fonts/HKGrotesk-SemiBold.otf' in '/Users/username/Github/repo/src/pages/templates/restaurants'``` If I place ```hungry.js``` and ```hungry.module.scss``` at ```/pages``` root level it works but not if it's nested page. Thank you for taking the time. – Jovil Hiew Feb 12 '21 at 11:39
  • Can you provide a working sandbox? You don't need to change the path of the fonts, you need to change the relativity of in the `typography.scss` file. – Ferran Buireu Feb 12 '21 at 11:41
  • Here's a minimal example: https://github.com/jovil/sandbox Thank you. – Jovil Hiew Feb 12 '21 at 12:04
  • The project, once you comment the manifest plugin, works without errors and loads the fonts correctly. – Ferran Buireu Feb 12 '21 at 14:21
  • I'm probably missing something very obvious. I removed the manifest plugin from ```gatsby-config.js``` and ran ```gatsby clean``` and restarted the server. imported the styles using ```@import '../../../styles/typography.scss';``` but I still get the same error? – Jovil Hiew Feb 12 '21 at 15:04
  • I didn't touch anything, just the repo configuration commenting the manifest. – Ferran Buireu Feb 12 '21 at 15:44
  • Oh I see where the confusion is. The ```index.js``` was already working beforehand. It's the ```hungry.js``` that's the issue. – Jovil Hiew Feb 12 '21 at 15:48
  • I fixed it. Move your templates folder outside the `/pages` (ideally inside components) – Ferran Buireu Feb 12 '21 at 15:59
  • 1
    I noticed I just had to move the font-face rules inside the components folder, for some reason, and then it worked. Thanks for the help – Jovil Hiew Feb 13 '21 at 14:18