在使用Create React App构建React项目时，集成Ant Design (antd) UI库，并希望通过按需加载样式以减少打包文件的体积是一种常见的做法。但有时候可能会遇到按需加载样式无效的问题，这通常是因为样式文件没有正确加载或者webpack的配置问题。
为了解决这个问题，需要安装babel-plugin-import，这是一个用于优化引入antd组件的插件。antd默认会引入Less样式文件，如果不希望引入Less而希望引入编译后的CSS文件，需要进行相应的配置。
在Create React App中，有几种方式可以进行配置：
第一种方式是通过修改package.json文件来实现。这种方法的前提是确保webpack中的配置项中query下有babelrc: true的设置，这样webpack就会使用项目根目录下的.babelrc文件中的配置。通常的做法是在.babelrc文件中添加一个插件：
```json
{
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
```
这样配置之后，引入antd组件时，babel-plugin-import插件会自动将其转换为只引入对应的CSS文件。
第二种方式是直接在webpack的配置文件中进行设置。在Create React App中，会有两个配置文件，一个是用于开发环境的webpack.config.dev.js，另一个是用于生产环境的webpack.config.prod.js。在这两个文件的babel配置部分添加如下配置：
```javascript
babel: {
presets: [
"react-app"
],
plugins: [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
```
然后，在webpack的rules规则中，确保对JS和JSX文件的处理中加入babel-loader，以及相关的插件配置：
```javascript
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
}
```
完成以上配置后，再次启动项目，antd的样式应该能够正确按需加载，并且样式文件也会被正确引入。这不仅解决了样式无效的问题，还能减少最终打包文件的大小，优化项目的加载性能。
总结来说，解决Create React App使用antd按需加载样式无效的问题，主要依赖于正确安装并配置babel-plugin-import插件，通过配置.babelrc文件或直接在webpack配置文件中添加对应的插件配置。这样一来，就可以确保antd组件的样式按需加载，而不会影响到组件功能的正常使用。希望这些知识能够帮助大家在使用Create React App和antd进行项目开发时遇到类似问题能够快速解决，提升开发效率。
