gatsby: global-styles plugin doesn't work well alongside the sass-plugin

Summary

I’m trying to use the gatsby-plugin-global-styles to re-order the css link tags so they come before the style tag added by gatsby-plugin-typography, but it seems they don’t play along well (or maybe I’m missing something?).

I followed the instructions but when I import the scss file, something in gatsby (I couldn’t find out what yet) just injects them to the bottom of the header tag, always. It doesn’t matter if I use this plugin or try to re-order the typography header component in gatsby-ssr.js. So, my sass styles are loaded lastly (in this case Bootstrap 4) and they end up breaking the typeface styles from Typography.js.

I also added the gatsby-plugin-global-styles configuration snippet below the one for gatsby-typography, as instructed by the docs here, and as you may see below.

Environment (if relevant)

System: OS: Linux 4.15 Linux Mint 18.3 (Sylvia) CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz Shell: 5.1.1 - /bin/zsh Binaries: Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node Yarn: 1.12.3 - /usr/bin/yarn npm: 6.4.1 - ~/.nvm/versions/node/v10.14.1/bin/npm Languages: Python: 3.6.5 - /home/myuser/.pyenv/shims/python Browsers: Chrome: 79.0.3945.88 Firefox: 72.0.1 npmGlobalPackages: gatsby-cli: 2.8.27 gatsby-plugin-typography: 2.3.21

File contents (if changed)

gatsby-config.js:

const path = require('path');

module.exports = {
  pathPrefix: "/",
  siteMetadata: {
    title: `foo`,
    description: `bar`,
    author: `me`,
  },
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
   {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-react-bootstrap`,
        short_name: `react-bootstrap`,
        start_url: `/`,
        background_color: `#20232a`,
        theme_color: `#20232a`,
        display: `minimal-ui`,
      },
    },
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      }
    },
    {
      resolve: `gatsby-plugin-global-styles`,
      options: {
        pathToConfigModule: `src/utils/GlobalStyleComponent`,
        props: {} // this is required for the damn thing to compile
      },
    },
   `gatsby-plugin-sass`,
   'gatsby-plugin-favicon',
  ],
}

package.json:

{
  "name": "gatsby-starter-react-bootstrap",
  "private": true,
  "description": "A starter that includes and configures react-bootstrap and react-icons, along with SASS handling. ",
  "version": "0.1.0",
  "author": "Billy Jacoby <billyjacoby@gmail.com>",
  "dependencies": {
    "@nfront/global-styles": "^1.2.1",
    "bootstrap": "^4.3.1",
    "clsx": "^1.0.4",
    "gatsby": "^2.19.8",
    "gatsby-image": "^2.2.39",
    "gatsby-plugin-favicon": "^3.1.6",
    "gatsby-plugin-global-styles": "^1.0.17",
    "gatsby-plugin-google-analytics": "^2.1.34",
    "gatsby-plugin-manifest": "^2.0.29",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-sharp": "^2.4.3",
    "gatsby-plugin-typography": "^2.3.21",
    "gatsby-source-filesystem": "^2.0.33",
    "gatsby-transformer-sharp": "^2.3.13",
    "node-sass": "^4.12.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.0",
    "react-icons": "^3.6.1",
    "react-typography": "^0.16.19",
    "typography": "^0.16.19",
    "typography-theme-fairy-gates": "^0.16.19",
    "typography-theme-funston": "^0.16.19"
  },
  "devDependencies": {
    "gh-pages": "^2.0.1",
    "prettier": "^1.17.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop -H 0.0.0.0 -p 8000",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
    "deploy": "gatsby build --prefix-paths && gh-pages -d public"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "homepage": "https://billyjacoby.github.io/gatsby-react-bootstrap-starter/"
}

gatsby-node.js: N/A (empty) gatsby-browser.js: N/A (empty) gatsby-ssr.js: N/A (empty)

Thanks in advance.