Gatsby.js-Typography.js
自从安装了Gatsby.js-Typography.js,typography,gatsby,Typography,Gatsby,自从安装了typography.js之后,我遇到了以下错误: error There was an error compiling the html.js component for the development server. 14 | // Create family + styles string 15 | var fontsStr = ''; > 16 | if (props.typography.options.googleFonts) { |
typography.js
之后,我遇到了以下错误:
error There was an error compiling the html.js component for the development server.
14 | // Create family + styles string
15 | var fontsStr = '';
> 16 | if (props.typography.options.googleFonts) {
| ^
17 | var fonts = props.typography.options.googleFonts.map(function (font) {
18 | var str = '';
19 | str += font.name.split(' ').join('+');
WebpackError: Cannot read property 'googleFonts' of undefined
- GoogleFont.js:16 GoogleFont
~/react-typography/dist/GoogleFont.js:16:1
...
我不知道这意味着什么,也不知道如何修复它。
我使用的是Gatsby.js默认启动包
typography.js
同样:
import Typography from "typography";
const typography = new Typography({
baseFontSize: "18px",
baseLineHeight: 1.45,
headerFontFamily: [
"Avenir Next",
"Helvetica Neue",
"Segoe UI",
"Helvetica",
"Arial",
"sans-serif",
],
bodyFontFamily: ["Georgia", "serif"],
});
以及gatsby-config.js:
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: 'src/utilities/typography.js'
},
},
]
};
我只是有同样的错误,我可以通过在底部添加导出来修复它,如下所示:
export default typography;
感谢reactiflux discord上的octalmage帮助我解决这个问题。现在效果很好。希望有帮助 我刚刚遇到了同样的错误,我可以通过在底部添加导出来修复它,如下所示:
export default typography;
感谢reactiflux discord上的octalmage帮助我解决这个问题。现在效果很好。希望有帮助 谢谢你,亚历克斯!效果很好。真的很有帮助。对于其他人:正如Alex建议的那样,
导出默认排版
将进入typography.js
文件的最底部。谢谢Alex!效果很好。真的很有帮助。对于其他人:正如Alex所建议的那样,export default typography
进入typography.js
文件的最底部。