Ant Design Mobile 的使用

官网 ：mobile.ant.design/docs/react/…

我们是移动端所以我们选择用这个插件 引入 npm install antd-mobile --save 然后在项目中的样式是没有出来的所以要在 入口文件 index.js里面引入

import 'antd-mobile/dist/antd-mobile.css'

官网中很推荐 按需加载 所以我们也要用起来 按需加载# 引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。 $ npm install react-app-rewired customize-cra --save-dev /* 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 --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。 module.exports = function override(config, env) { // do stuff with the webpack config... return config; }; 使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。 npm install babel-plugin-import --save-dev

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

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

• module.exports = override(
• fixBabelImports('import', {

• libraryName: 'antd-mobile',
  

• style: 'css',
  

• }),
• ); 更改引用方式

• import Button from 'antd-mobile/lib/button';

• import { Button } from 'antd-mobile';