Gatsby启动开发服务器报错：Antd与Less配置问题（NPM环境）

核心原因 #

你的依赖版本不匹配：gatsby-plugin-less@6.20.0（适配Gatsby v4/v5）搭配了过旧的less@2.7.1和less-loader@3.0.0，同时gatsby-plugin-antd未正确继承Less配置，导致javascriptEnabled: true未生效到Antd的Less文件编译流程中。

修复步骤 #

1. 升级Less相关依赖到兼容版本 #

卸载旧版本，安装适配gatsby-plugin-less@6.x的依赖：

npm uninstall less less-loader
npm install less@^4.1.3 less-loader@^11.1.3

注：less@4.x原生支持javascriptEnabled配置，且与gatsby-plugin-less@6.x完全兼容。

2. 调整gatsby-config.js的插件配置 #

确保gatsby-plugin-less在gatsby-plugin-antd之前加载，同时将javascriptEnabled配置正确传入，让gatsby-plugin-antd复用Less配置：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-less`,
      options: {
        javascriptEnabled: true,
        // 如需自定义Antd主题，可在此添加modifyVars参数
        // modifyVars: { '@primary-color': '#1DA57A' },
      },
    },
    {
      resolve: `gatsby-plugin-antd`,
      options: {
        style: true, // 启用Less样式加载，而非预编译CSS
      },
    },
    // 其他插件...
  ],
}

3. 清理缓存并重启服务器 #

Gatsby缓存可能残留旧配置，执行以下命令重置：

gatsby clean
npm run develop

额外说明 #

• gatsby-plugin-antd@2.2.0与你使用的antd@3.26.11版本匹配，无需升级Antd
• 若仍报错，检查是否存在其他Less相关插件或自定义webpack配置，避免覆盖Less loader的参数

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