带CDN参考的盖茨比

Question

我试图在我的Gatsby项目中使用bootstrap.css和Google字体CDN。

没有HTML文件；只是JavaScript文件。

对于引导程序，我可以从中npm install bootstrap导入min.css。

试图弄清楚如何Amatic SC从Google字体中获取字体；我已经npm安装好了google-fonts-webpack-plugin。

我gatsby-node.js通过添加使用：

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

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

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

};

但是，我得到以下错误；

无效的“构造函数”参数。您必须提供函数或null

我在做什么错，我该如何解决？

有没有一种直接引用CDN的方法，所以除了npm安装引导程序外，我还可以引用其最新版本？

Answer 1

您可以使用NPM的typeface-amatic-sm包含字体，并在JS中执行以下操作：

import 'typeface-amatic-sc'

否则，可以在</head>使用头盔中包括脚本，例如：

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