为什么Gatsby构建时出现缺少分号的CssSyntaxError报错？

该错误为Gatsby SSR构建阶段解析动态生成的CSS时发现语法缺失分号，<css input>标识说明该CSS不是静态本地.css文件，是运行时生成的样式内容，可按以下步骤逐步排查：

• 第一步：清理缓存重试
  先执行以下命令清理本地所有缓存后重新构建：

  gatsby clean && rm -rf node_modules package-lock.json && npm cache clean --force && npm install && npm run build
  

  若清理后报错消失，说明是旧缓存残留的异常样式导致的问题。

• 第二步：排查MUI自定义样式语法
  重点检查/invitation/页面对应的所有组件的样式写法：

  1. 检查所有sx属性的对象写法，是否存在未闭合的字符串、缺少逗号的属性项
  2. 检查styled自定义组件、makeStyles/useStyles的样式代码，是否存在手写CSS时遗漏分号的情况
  3. 检查是否有动态拼接CSS字符串的逻辑，拼接时是否漏了分号

• 第三步：定位错误CSS具体内容
  在项目根目录的gatsby-node.js中添加以下配置，构建出错时会自动导出完整的错误CSS文件到项目根目录：

  exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
    if (stage.includes('build')) {
      const config = getConfig()
      config.plugins.push({
        apply: (compiler) => {
          compiler.hooks.compilation.tap('CatchCSSParseError', (compilation) => {
            compilation.hooks.processAssets.tap('OutputErrorCSS', () => {
              compilation.errors.forEach(err => {
                if (err.name === 'CssSyntaxError') {
                  require('fs').writeFileSync('./broken-style.css', err.input.source)
                  console.log('异常CSS已导出到项目根目录broken-style.css，可查看第1479行定位来源')
                }
              })
            })
          })
        }
      })
      actions.replaceWebpackConfig(config)
    }
  }
  

  重新执行构建后打开导出的broken-style.css，查看1479行的样式内容，即可对应到具体是哪个组件的样式存在问题。

• 第四步：排查依赖兼容性
  检查gatsby-plugin-material-ui、@mui/material等相关依赖的版本是否存在兼容冲突，可尝试将所有MUI相关依赖升级到最新稳定版，或回退到上一个可正常构建的版本。

内容的提问来源于stack exchange，提问作者Hasham Minhas