Gatsby with CDN reference

Question

I'm trying to get bootstrap.css and Google fonts CDNs working in my Gatsby project.

There is no HTML file; just JavaScript files.

For bootstrap, I can npm install bootstrap and then import the min.css from that.

Trying to figure out how to get Amatic SC font from Google fonts; I have npm installed google-fonts-webpack-plugin.

I am using gatsby-node.js by adding:

const GoogleFontsPlugin = require("google-fonts-webpack-plugin")

exports.modifyWebpackConfig = ({ config, stage }) => {

    config.plugin("google-fonts-webpack-plugin",new GoogleFontsPlugin(
        {
            fonts: [
                { family: "Amatic SC" }
            ]
        }
    ),null)

};

However, I get the error below;

Invalid 'constructor' parameter. You must provide either a function or null

What am I doing wrong and how can I fix it?

Is there a way of referencing a CDN directly so rather than npm installing bootstrap, I could just reference its latest version?

Answer 1

You can include the font using typeface-amatic-sm from NPM, and in your JS do:

import 'typeface-amatic-sc'

Otherwise, can include scripts it in your </head> using helmet like:

<Helmet>    
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</Helmet>