react脚手架create-react-app配置antd中css按需加载的坑该怎么解决

如何解决create-react-app配置antd中CSS按需加载的问题

一、理解CSS按需加载的原理
antd是一个UI框架，它的样式文件比较庞大，如果一次性全部加载，会对页面性能产生较大的影响。因此，我们可以通过CSS按需加载的方式，只加载当前使用到的组件的样式，以减小文件体积。

二、安装并配置babel-plugin-import插件
1. 在create-react-app生成的项目中，找到babel配置文件.babelrc。

2. 在plugins属性中添加配置，并指定要按需加载的组件名：

"plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }
  ]
]

这里的libraryDirectory是antd在node_modules中的路径，默认是lib，但是如果我们用了ES6的模块引入方式，就需要修改为es。

三、引入样式文件
1. 首先，在需要使用antd组件的页面或组件文件中引入antd的样式文件。
比如，在App.js中引入样式文件：

import 'antd/dist/antd.css';

2. 确保安装了less和less-loader依赖。
在项目根目录运行以下命令安装：

npm install less less-loader --save-dev

3. 创建一个自定义的主题文件。
在项目的src目录下，创建一个名为theme.less的文件，并写入以下内容：

@primary-color: #1890ff; // 修改为你想要的主题色

四、应用自定义主题
1. 修改webpack配置文件。
在项目根目录下，找到webpack.config.js文件。

2. 找到rules数组中的关于less和css的配置，替换为以下内容：

{
  test: /\.less$/,
  use: [
    require.resolve('style-loader'),
    require.resolve('css-loader'),
    {
      loader: require.resolve('less-loader'),
      options: {
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: require(resolveApp('src/theme.less')),
        },
      },
    },
  ],
},

3. 引入resolveApp函数。
在自动生成的webpack.config.js文件头部，增加以下代码：

const { resolveApp } = require('./utils');

至此，我们已经完成了create-react-app项目中配置antd的CSS按需加载的过程。

可以根据以上步骤，成功配置antd的CSS按需加载功能。

注意：在进行配置时，如果遇到问题可以通过重启项目、检查组件引入是否正确、检查依赖是否安装正确等方式进行排查。