带有CDN引用的盖茨比

Question

我正在尝试让bootstrap.css和谷歌字体CDN在我的盖茨比项目中工作。

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

对于引导，我可以NPM安装引导，然后从中导入min.css。

试图弄清楚如何从Google Fonts获得amatic sc字体；我安装了npmgoogle-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)

};

然而，我得到下面的错误；

“constructor”参数无效。必须提供函数或null

我做错了什么，我该如何修复它？

有没有一种直接引用CDN的方法，所以我可以直接引用CDN的最新版本，而不是npm安装引导程序？

Answer 1

您可以使用NPM中的typeface-amatic-SM包含字体，并在您的JS中做到：

import 'typeface-amatic-sc'

否则，可以使用头盔在中包含以下脚本：

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