使用antd报less的错误

问题描述

在使用antd组件库时，按照官方文档建立config-override.js,使用react-app-rewired进行build或者start时，会报

./node_modules/antd/lib/menu/style/index.less
Module build failed:

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in D:\Git\career_guide_front\node_modules\antd\lib\style\color\bezierEasing.less (line 108, column 0)
复制代码

的错误。

解决方案

主要进行2处修改，首先这个问题在antd的issue中有提及，官方说在3.6.4版本中已经修复，所以首先检查antd的版本。实际解决中，改变版本未解决less报错的问题，所以按照之前的方案对config-override.js进行修改

检查antd版本

打开package.json文件，在dependencies下找到antd版本，若小于3.6.4，建议修改成3.6.4然后使用npm或者yarn对antd重新进行安装。

对config-override.js进行修改

打开config-override.js，添加配置

config = rewireLess.withLoaderOptions({
    modifyVars: { "@primary-color": "#1DA57A" },
    javascriptEnabled: true,
  })(config, env);
复制代码