标签：创建 red 项目 cto mod wired rect 红色 全局
1.全局安装yarn
npm install -g create-react-app yarn
2.创建react项目,并用yarn start 运行
3.引入antd
yarn add antd
4.在app.js引入button
import Button from ‘antd/lib/button‘;
<div className="App">
<Button type="primary">Button</Button>
</div>
5.修改 src/App.css，在文件顶部引入 antd/dist/antd.css
@import ‘~antd/dist/antd.css‘;
6.按需加载模块
yarn add react-app-rewired@2.0.2-next.0
7.修改package.json，绿色替换红色
/* package.json */ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired build", - "test": "react-scripts test", + "test": "react-app-rewired test", }
8. 根目录创建 config-overrides.js，添加如下代码
module.exports = function override(config, env) { // do stuff with the webpack config... return config; };
9.使用 babel-plugin-import
yarn add babel-plugin-import
10.用下面代码覆盖config-overrides.js的代码
const { injectBabelPlugin } = require(‘react-app-rewired‘);
module.exports = function override(config, env) {
config = injectBabelPlugin(
[‘import‘, { libraryName: ‘antd‘, libraryDirectory: ‘es‘, style: ‘css‘ }],
config,
);
return config;
};
11.修改app.css代码
@import ‘~antd/dist/antd.css‘; // 删除 import Button from ‘antd/lib/button‘; // 删除 import { Button } from ‘antd‘; // 添加
按照上面的操作就可以了
ant Design（pc端的使用），并实现ant design的按需加载
标签：创建 red 项目 cto mod wired rect 红色 全局
原文地址：https://www.cnblogs.com/luguankun/p/10276185.html
