Gatsby使用gatsby-plugin-prettier-eslint添加CSS时报错Expected a string, got object

• 第一步：调整gatsby-config.js中的插件加载顺序
  所有CSS处理类插件（包括gatsby-plugin-postcss、gatsby-plugin-sass、gatsby-plugin-less等）必须放在gatsby-plugin-prettier-eslint之前加载，错误的加载顺序会导致eslint校验前置拦截了CSS文件的正常编译，触发类型报错。
  参考正确配置结构：

module.exports = {
  plugins: [
    // 优先加载CSS处理插件
    `gatsby-plugin-postcss`,
    // 再加载prettier-eslint插件
    {
      resolve: `gatsby-plugin-prettier-eslint`,
      options: {
        prettier: {
          patterns: [
            "**/*.{js,jsx,ts,tsx,json,md}"
          ]
        },
        eslint: {
          patterns: [
            "**/*.{js,jsx,ts,tsx}"
          ]
        }
      }
    }
  ]
}

注意在插件的options里明确配置prettier和eslint的校验匹配规则，排除.css、.scss等样式文件，避免插件对样式文件做无效校验。

• 第二步：排查CSS导入语法是否正确
  如果是全局样式，直接使用import './style/global.css'导入即可，不需要赋值给变量；如果是CSS Modules，必须给样式文件加.module.css后缀，再用import styles from './style/component.module.css'的方式导入，两种导入方式不能混用。

• 第三步：版本不兼容的替代方案
  gatsby-plugin-prettier-eslint已长时间停止维护，和Gatsby 4.0以上版本的webpack 5配置存在兼容问题，如果调整配置后依然报错，可直接卸载该插件，改用本地ESLint+Prettier的配置方案：

1. 执行npm uninstall gatsby-plugin-prettier-eslint卸载第三方插件
2. 在项目根目录新增.eslintrc.js、.prettierrc配置文件，写入对应的校验规则
3. 在package.json的scripts中新增lint命令即可实现同等校验效果，不会影响项目构建逻辑。

• 第四步：清除缓存重启服务
  Gatsby的本地缓存会留存历史编译产物，配置修改后执行gatsby clean清除缓存，再执行gatsby develop重启开发服务即可生效。

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