react antd-mobile lib-flexible自适应（px2rem无效的解决方法）

一、前言

适应时代，接触了点typescript，正好公司做了个移动端项目，不过我用的是vue，利用一些时间，用react+typescript来重新写一个，正好样式有了，省了一部分时间，但是typescript还是有诸多限制，其中波折，难以言述，闲话少述，本项目采用react+typescript+aixos+antd-mobile+scss搭建而成，因为是移动端，所有肯定要考虑自适应问题，但是出现了问题，很心累。

二、自适应

选取淘宝自适应方案lib-flexible,加px2rem，px自动转换rem
1）自定义webpack，运行该命令，会把webpack的配置文件暴露出来

npm run eject

2）安装lib-flexible

npm insatll lib-flexible --save

3）安装px2rem，这里安装postcss-px2rem-exclude，postcss-px2rem-exclude中包含了px2rem

npm insatll postcss-px2rem-exclude --save

4）配置config/webpack.config.js，在config目录下找到webpack.config.js文件，加入

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

然后再下面代码中加入下面这行

px2rem({
     remUnit:75,exclude: /node_modules/i}), // 设计图为750，并且排除node_modules目录不让此目录下转化为rem

5）src目录下找到index入口文件，我用的是typescript，所以是index.tsx文件，非typescript目录则为index.js文件，再文件上面加入

import 'lib-flexible'; 

6）找到public/index.html文件，加入如下代码：

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
		name="viewport"
/>

7）重新运行项目，一般就可以看到px转rem了。

三、px2rem无效

你以为我写这篇文章只单单说上面的步骤吗，上面的步骤，网上的文章没有一大把也有两大把，我写这篇文章的目的是我完全按照上面的步骤搞了，px根本没有转换成rem，怀疑人生，而且网上也没有解决方法，所以我写这篇文章的目的就是解决px2rem无效的问题，问题的关键在于我使用的antd-mobile这个UI库,然后我又按照antd-mobile的官网的方式按需引入，官方文档传送门
,在根目录下新建了一个config-overrides.js的文件

解决方法：在config-overrides.js文件里重写postcss，加入如下代码，unbelievable，他竟然成功了，成功了!!! 如果这篇文章对你有帮助，记得帮我点赞留言哦，如果可以，也可以关注我哦，后续也会发布一些遇到的困难以及解决方法，感谢。

const {
     
	override,
	fixBabelImports,
	addWebpackAlias,
	addDecoratorsLegacy,
} = require("customize-cra");
const path = require("path");
const rewirePostcss = require("react-app-rewire-postcss");
const px2rem = require("postcss-px2rem-exclude");
module.exports = override(
	fixBabelImports("import", {
     
		libraryName: "antd-mobile",
		style: "css",
	}),
	addWebpackAlias({
     
		"@": path.resolve(__dirname, "src"),
	}),
	addDecoratorsLegacy(),
	(config, env) => {
     
		// 重写postcss
		rewirePostcss(config, {
     
			plugins: () => [
				require("postcss-flexbugs-fixes"),
				require("postcss-preset-env")({
     
					autoprefixer: {
     
						flexbox: "no-2009",
					},
					stage: 3,
				}),
				//关键:设置px2rem
				px2rem({
     
					remUnit: 75,
					exclude: /node-modules/i,
				}),
			],
		});

		return config;
	}
);