Question

我要将网站从create-react-app移植到gatsby。我已经添加了gatsby作为依赖项，但是现在当我运行gatsby develop时，出现以下错误：

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.23, but autoprefixer uses 7.0.23. Perhaps this is the source of the error below.

我对webpack不太熟悉，但是我的理解是这是由于它的配置导致的？到目前为止，我已经尝试通过使用yarn工作区来强制css-loader程序包依赖于与autofixer相同的PostCSS版本来解决此问题。

我对解决方案的最佳猜测将涉及重新配置Webpack，但我不知道如何进行此操作。搜索也不会产生任何有用的结果。我非常感谢您对此提供的帮助以及对问题所在的解释。

Answer 1

gatsby中的PostCSS版本是6.0，但是在create-react-app中是7.0 ... 您应该指定PostCSS配置首先，安装gatsby-plugin-postcss，然后写入gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby`,
  },
 plugins: [
  {
    resolve: `gatsby-plugin-postcss`,
    options: {
      cssLoaderOptions: {
        camelCase: false,
      },
    },
  },
]
}

通过此代码，您将PostCSS的版本指定为7.0。但是您需要使其在页面中可见，因此您应该创建一个postcss.config.js和这些行

const postcssPresetEnv = require(`postcss-preset-env`)

module.exports = () => ({
  plugins: [
    postcssPresetEnv({
      stage: 0,
    }),
  ],
})

Autofixer使用的PostCSS版本与当前版本不同，这会导致错误。我该如何解决？

1 个答案: