引入antd组件样式_react配置config-overrides.js文件，按需引入Antd以及less

最近在熟悉react，通过react create app创建项目后，并不像以前一样可以进行webpack的配置，官方文档有写到可以npm run eject暴露所有配置，会发现根目录下生成了 config 目录，但是此操作是不可逆的。

如果需要在项目中配置一些webpack配置，需要在根目录下新建一个名称为config-overrides.js的文件

1、下载antd 包

npm install antd

复制代码

2、安装customize-cra，引入react-app-rewired插件

react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置

npm install react-app-rewired customize-cra babel-plugin-import

复制代码

3、自定义less-loader,改变antd默认样式

npm install less less-loader

复制代码

4、在根目录下面新建config-overrides.js，并修改相关配置

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

const path = require("path");

module.exports = override(

// 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import)

fixBabelImports("import", {

libraryName: "antd",

libraryDirectory: "es",

style: true, //自动打包相关的样式 默认为 style:'css'

}),

// 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题

addLessLoader({

javascriptEnabled: true,

modifyVars: { "@primary-color": "#1DA57A" },

}),

//增加路径别名的处理

addWebpackAlias({

'@': path.resolve('./src')

})

);

复制代码

5、修改packge.json 的配置文件

"scripts": {

"start": "react-app-rewired start",

"build": "react-app-rewired build",

"test": "react--app-rewired test",

"eject": "react-scripts eject"

},

复制代码

6、最后，在app.js引入需要的组件即可

import { Button, Table } from "antd";

复制代码