我正在将我的create-react-app转换为Gatsby。为此,我采用了现有项目,并做了npm install gatsby,安装了gatsby-cli
,然后从新的Gatsby站点复制了项目结构的更改。然后,我将App.js移至src / pages / index.js。我最终删除了从gatsby new
创建的站点复制的gatsby-config.js,因为我不知道如何安装gatsby-plugin-react-helmet
插件。我不知道gatsby-config.js指定的插件是否需要使网站正常工作。
该项目使用react-circular-progressbar实现了圆形进度条。尝试使用gatsby build
构建我的应用时,出现此错误:
Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.23, but autoprefixer uses 7.0.26. Perhaps this is the source of the error below.
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Browser queries must be an array or string. Got object.
File: node_modules/react-circular-progressbar/dist/styles.css
我使用npm i postcss
将PostCSS更新为7.0.26,但仍然显示我使用的是旧版本。
如果签出此link,则会看到此错误。我不确定浏览器查询是什么,但是我检查了错误中引用的styles.css文件,唯一看到的是类样式,然后是该浏览器特定的样式:-webkit-transition: stroke-dashoffset 0.5s ease 0s;
删除此行不能解决问题。
gatsby-config.js
是必不可少的Gatsby configuration files之一。没有添加此文件的任何调试都注定是无望的。
从gatsby-config.js
复制空的official documentation,然后按照documentation中的说明添加PostCSS插件。重新运行npm或yarn。运行gatsby clean
,然后运行gatsby develop
。
该错误很可能是由于缺少POSTCSS插件应提供并易于解决的源文件或配置文件引起的。
您的网站现在可以正常工作吗?