Gatsby.js 因此错误而失败 -> 生成开发 SSR 包失败未知词位置：相对；

如何解决Gatsby.js 因此错误而失败 -> 生成开发 SSR 包失败未知词位置：相对；

当我开发或构建时，我遇到了这个问题。

[styled-jsx] Loading plugin from path: styled-jsx-plugin-postcss

 ERROR #98123  WEBPACK

Generating development SSR bundle Failed

/Users/johncoker/newprojects/learndiesels/learndeisels/src/components/Menu/Menu.js:
[styled-jsx-plugin-postcss] postcss Failed with CssSyntaxError: <css input>:24:13: UnkNown word

  22 |             margin: 0;
  23 |             padding: 0; /* 0 /*%%styled-jsx-placeholder-4%%*/; */
> 24 |             position: relative;
     |             ^
  25 |             width: 100%;
  26 |           }

我刚刚在 gatsby 中更新到 v3，所以我将遇到几个问题，这只是第 1 个问题。我认为这可能是 styled-jsx-plugin-postcss 的问题，但我不确定如何进行。我似乎找不到文档帮助。感谢您的帮助！

package.json

"dependencies": {
    "antd": "^4.16.8","fontfaceobserver": "^2.0.13","gatsby": "^3.9.1","gatsby-cli": "^3.9.0","gatsby-image": "^3.9.0","gatsby-plugin-algolia": "^0.22.0","gatsby-plugin-catch-links": "^3.9.0","gatsby-plugin-Feed": "^3.9.0","gatsby-plugin-google-analytics": "^3.9.0","gatsby-plugin-gtag": "^1.0.13","gatsby-plugin-layout": "^2.9.0","gatsby-plugin-manifest": "^3.9.0","gatsby-plugin-netlify": "^3.9.0","gatsby-plugin-offline": "^4.9.0","gatsby-plugin-preact": "^5.9.0","gatsby-plugin-react-helmet": "^4.9.0","gatsby-plugin-react-svg": "^3.0.1","gatsby-plugin-sharp": "^3.9.0","gatsby-plugin-sitemap": "^4.5.0","gatsby-plugin-styled-jsx": "^4.9.0","gatsby-plugin-styled-jsx-postcss": "^2.0.2","gatsby-remark-copy-linked-files": "^4.6.0","gatsby-remark-embed-video": "^3.1.1","gatsby-remark-emojis": "^0.4.3","gatsby-remark-external-links": "^0.0.4","gatsby-remark-images": "^5.6.0","gatsby-remark-prismjs": "^5.6.0","gatsby-remark-responsive-iframe": "^4.6.0","gatsby-remark-smartypants": "^4.6.0","gatsby-source-filesystem": "^3.9.0","gatsby-transformer-remark": "^4.6.0","gatsby-transformer-sharp": "^3.9.0","gatsby-transformer-sqip": "^3.9.0","js-yaml": "^4.1.0","normalize.css": "^8.0.0","preact": "^10.5.3","preact-render-to-string": "^5.1.10","prismjs": "^1.15.0","react": "^17.0.0","react-addons-perf": "^15.4.2","react-dom": "^17.0.0","react-facebook": "^8.1.4","react-helmet": "^6.1.0","react-icons": "^4.2.0","react-instantsearch": "^6.12.0","react-md-spinner": "^1.0.0","react-obfuscate": "^3.6.8","react-scripts": "^4.0.0","react-share": "^4.4.0","react-visibility-sensor": "^5.1.1","styled-jsx": "^3.4.4","styled-jsx-plugin-postcss": "^4.0.1","styled-jsx-plugin-stylelint": "^0.1.0","tinycolor2": "^1.4.1","typeface-open-sans": "^1.1.13","yaml-loader": "^0.6.0"
  }
"devDependencies": {
    "@mapBox/stylelint-processor-arbitrary-tags": "^0.4.0","babel-eslint": "^10.1.0","babel-plugin-dynamic-import-webpack": "^1.0.2","babel-plugin-import": "^1.8.0","babel-plugin-Syntax-dynamic-import": "^6.18.0","babel-webpack-plugin": "^0.1.1","dotenv": "^10.0.0","eslint": "^7.13.0","eslint-config-airbnb": "^18.2.1","eslint-config-google": "^0.14.0","eslint-config-prettier": "^8.3.0","eslint-config-wesbos": "^1.0.1","eslint-plugin-graphql": "^4.0.0","eslint-plugin-html": "^6.1.0","eslint-plugin-import": "^2.22.1","eslint-plugin-jsx-a11y": "^6.4.1","eslint-plugin-prettier": "^3.1.4","eslint-plugin-react": "^7.21.5","eslint-plugin-react-hooks": "^4.2.0","json-loader": "^0.5.7","postcss": "^8.3.5","postcss-cli": "^8.3.1","postcss-cssnext": "^3.1.0","postcss-custom-properties": "^11.0.0","postcss-custom-selectors": "^6.0.0","postcss-easy-media-query": "^1.0.0","postcss-load-plugins": "^2.3.0","postcss-loader": "^6.1.1","postcss-media-variables": "^2.0.1","postcss-nested": "^5.0.5","postcss-sorting": "^6.0.0","postcss-text-remove-gap": "^1.1.1","postcss-utilities": "^0.8.0","precss": "^4.0.0","prettier": "^2.1.2","serve": "^12.0.0","stylelint": "^13.13.1","stylelint-config-css-modules": "^2.2.0","stylelint-config-standard": "^22.0.0","url-loader": "^4.1.1","webpack-bundle-analyzer": "^4.4.2"
  }
}

解决方法

我不确定 styled-jsx-plugin-postcss 目前是否正在维护并与 Gatsby v3 兼容。它似乎是一个遗留/弃用的存储库（最后一次提交是 3 年前），所有者本身建议不要使用它：

对于 PostCSS，在不了解您实现的更多细节的情况下，我建议gatsby-plugin-postcss 更新和维护良好，并具有大量选项和自定义。