带有 CDN 参考的 Gatsby

Question

我正在尝试让 bootstrap.css 和 Google 字体 CDN 在我的 Gatsby 项目中运行。

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

对于 bootstrap，我可以 npm install bootstrap 然后从中导入 min.css。

试图弄清楚如何从 Google 字体中获取 Amatic SC 字体；我安装了 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)

};

但是，我得到以下错误；

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

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

有没有直接引用 CDN 的方法，而不是 npm 安装 bootstrap，我可以只引用它的最新版本？

Answer 1

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

import 'typeface-amatic-sc'

否则，可以使用 helmet 在您的 </head> 中包含脚本，例如：

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

带有 CDN 参考的 Gatsby

Gatsby with CDN reference

reactjs

gatsby

google-fonts