React自定义主题配置

React 自定义 antd 主题方法编译失败与解决办法

一、按照官网操作

首先我是按照官网的步骤一步一步操作下来的：

1. 安装 less 和 less-loader

   npm install less less-loader

2. 引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 config-overrides.js 文件如下:

   //配置具体的修改规则
   const { override, fixBabelImports,addLessLoader} = require('customize-cra');
   
   module.exports = override(
     fixBabelImports('import', {
       libraryName: 'antd',
       libraryDirectory: 'es',
       style: true,
     }),
     addLessLoader({
       javascriptEnabled: true,
       modifyVars: { '@primary-color': 'green' },
     }),
   );

二、出现的问题

1. addLessLoader 这块出现以下问题

   ValidationError: Invalid options object. Less Loader has been initialized using an options object
   that does not match the API schema.
   - options has a unknown property 'modifyVars'. These properties are valid: 
   object { lessOptions?, additonalData?, sourceMap?, webpackImporter? }

   这是由于 less 更新了导致的，解决办法：

   addLessLoader({
     lessOptions:{  
       javascriptEnabled: true,
       modifyVars: { '@primary-color': 'green' },
     }
   }),

2. 编译出错如下

   TypeError: this.getOptions is not a function

   解决方案：我装的都是最新版本less@4.1.1 less-loader@8.0.0 ，我们需要降低版本，亲测以下两个版本可以。

   • 先卸载 less 和 less-loader

     npm uninstall less less-loader

   • 再安装指定版本

     npm i less@3.12.2 less-loader@7.1.0

三、总结

前端技术更新太快的同时就会带来不兼容的问题，我们能做的就是乐在其中。