Gatsby与CDN引用

Question

我正在尝试在我的 Gatsby 项目中使用 bootstrap.css 和 Google 字体 CDNs。

没有 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)

};

然而，我遇到了以下错误：

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

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

是否有一种直接引用CDN的方法，而不是使用npm安装bootstrap，我可以只引用其最新版本？

- user2047485

Answer 1

你可以使用来自 NPM 的 typeface-amatic-sc 来包含字体，在你的 JS 中进行如下操作：

import 'typeface-amatic-sc'

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

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

- rebelliard

---

好的，谢谢。我会尝试一下。你知道为什么我的方法不起作用吗？只是想了解一下，因为这可能会帮助我避免将来犯同样的错误。 - user2047485

我是否需要添加所有文件才能使用这个解决方案，还是有更聪明的方法？ - sushildlh