盖茨比与CDN参考

时间:2018-05-02 12:48:41

标签: reactjs gatsby google-fonts

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

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

};

但是,我收到以下错误;

  

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

我做错了什么,如何解决?

有没有办法直接引用CDN而不是npm安装bootstrap,我可以引用它的最新版本?

1 个答案:

答案 0 :(得分:4)

您可以使用NPM中的typeface-amatic-sm和JS do:

中包含字体
import 'typeface-amatic-sc'

否则,可以使用helmet</head>中添加脚本,例如:

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