react在不eject的情况下，less失效问题记录

按照antd的文档使用react-app-rewired+customize-cra想要实现样式按需加载和自定义主题功能。

配置如下：

const { override, addLessLoader, fixBabelImports } = require("customize-cra");
module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: true
   }),
   addLessLoader({
     lessOptions: {
       javascriptEnabled: true,
       modifyVars: { '@primary-color': '#F8B654' },
     }
   })
)

 按照该配置配好后，生产环境打包是有效的，但也存在问题：

问题1：antd的table组件合并行的样式有问题，行内的文字没有上下居中。如图：

 

 

解决方法：不要使用addLessLoader就能解决（虽然该方式能解决，但是不能用自定义主题功能了，目前还没找到原因)。

除以上问题以外还存在个问题就是开发环境是完全没有按需加载和自定义主题的效果，less样式根本就没加载出来，经查找发现是因为react-scripts的版本和react-app-rewired版本不匹配的原因，react-app-rewired用的是2.1.3,react-scripts用的是3.4.3，后来把react-scripts改成4.0.3就可以解决less不加载和自定义主题没效果的问题。不过问题1还是存在，记录一下，接着找问题1的原因去。。。

 

 

接上面：

问题1已找到原因，是因为样式底层样式问题干扰导致的，和antd无关。