关于 injectBabelPlugin is not a function

在学习ant design的自定义主题这一功能时候,官方给到创建config-overrides.js文件,并且写入如下代码:

const { injectBabelPlugin } = require('react-app-rewired');

  module.exports = function override(config, env) {
   config = injectBabelPlugin(
     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
     config,
   );
    return config;
  };

发现项目不能运行,产生如下错误信息

关于 injectBabelPlugin is not a function_第1张图片

主要因为injectBabelPlugin is not a function

查阅资料发现react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired,react-app-rewired的新版本删除所有方法injectBabelPlugin,这些方法被移动到一个名为'customize-cra'的新包中了

修改方法:
1.确保已经下载customize-cra,less-loader
2.修改config-overrides文件为

const {
  override,
  fixBabelImports,
  // addLessLoader,
} = require("customize-cra");


module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
  }),
  // addLessLoader({
  //   javascriptEnabled: true,
  //   modifyVars: { "@primary-color": "#1DA57A" }
  // })
);

然后重新npm run start

运行成功

你可能感兴趣的:(技术文摘)