第二章：react项目 引入antd-mobile

一、create-react-app 创建的项目 引入 antd-mobile

参考：https://mobile.ant.design/docs/react/use-with-create-react-app-cn

具体的配置上面官网地址写的很清楚了，就不再照搬了，同学们自己去查看即可~~~~

 

细心的同学就会立即发现，怎么引入之后lib-flexible和 postcss-px2rem的适配方案失效了？？？？？

 

二、解决引入 antd-mobile 之后  lib-flexible和 postcss-px2rem 转rem失效的问题

1、安装postcss-px2rem-exclude

yarn add postcss-px2rem-exclude

2、修改第一章写入的文件config-overrides.js

// const { override, fixBabelImports } = require('customize-cra');
// module.exports = override(
//     fixBabelImports('import', {
//         libraryName: 'antd-mobile',
//         style: 'css',
//     }),
// );

const { override, fixBabelImports, addPostcssPlugins} = require('customize-cra');
module.exports = override(
    // antb-mobile按需引入
    fixBabelImports('import', {
    libraryName: 'antd-mobile',
    libraryDirectory: 'es',
    style: 'css',
 }),
 // postcss-px2rem-exclude---（exclude:忽略文件）
 addPostcssPlugins([require("postcss-px2rem-exclude")({ remUnit: 75, exclude: /node_modules/i })])
);

3、去掉之前webpack.config.js的配置

// const px2rem = require('postcss-px2rem');


~~~~~~~~~~~~~~~~~~



// px2rem({ remUnit: 75}), // TODO px2rem({ remUnit: 75 })

4、重启~~   OK~~~~搞掂

源码地址：https://github.com/hwq888/react-demo