22 React用Antd高级配置，按需引入css样式配置

一、React UI框架 Antd (Ant Design)配置react-app-rewired按需加载Antd的css

1、安装antd：

上一篇

2、安装（react-app-rewired）一个对 create-react-app 进行自定义配置的社区解决方案 ：

yarn add react-app-rewired   
   或 
cnpm install  react-app-rewired --save

新版还需安装：

yarn add customize-cra 
  或(此库不可用建议用yarn)
cnpm install  rcustomize-cra --save

3、修改 package.json：

react-scripts 需改为 react-app-rewired：

"scripts": {
		"start": "react-app-rewired start",
		"build": "react-app-rewired build",
		"test": "react-app-rewired test --env=jsdom",
		"eject": "react-app-rewired eject"
 }

4、在项目根目录创建一个 config-overrides.js 用于修改默认配置：

module.exports = function override(config, env) {
	 // do stuff with the webpack config...
 return config;
};

5、安装babel-plugin-import （是一个用于按需加载组件代码和样式的 babel 插件）：

yarn add babel-plugin-import   
或 
cnpm install babel-plugin-import --save

6、修改 config-overrides.js

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
fixBabelImports('import', {
		libraryName: 'antd',
		libraryDirectory: 'es',
		style: 'css',
	}),
);

7、然后移除前面在 src/App.css 里全量添加的 @import ‘~antd/dist/antd.css’; 直接引入组件使用就会有对应的css

import { Button } from 'antd';

<Button type="primary">Primary</Button>

二、React UI框架 Antd (Ant Design)配置craco 按需加载Antd的css

按照官网的步骤

https://ant.design/docs/react/use-with-create-react-app-cn

1.安装 craco

yarn add @craco/craco

2.修改 package.json 里的 scripts 属性

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

3.然后在项目根目录创建一个 craco.config.js 用于修改默认配置。

/* craco.config.js */
module.exports = {
  // ...
};

按照craco-antd在github的地址的提示去安装

https://github.com/DocSpring/craco-antd