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

短命女 2022-12-01 01:19 272阅读 0赞

### 一、前言 ###

适应时代，接触了点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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70_pic_center]  
5）src目录下找到index入口文件，我用的是typescript，所以是index.tsx文件，非typescript目录则为index.js文件，再文件上面加入

import 'lib-flexible';

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

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

### 三、px2rem无效 ###

你以为我写这篇文章只单单说上面的步骤吗，上面的步骤，网上的文章没有一大把也有两大把，我写这篇文章的目的是我完全按照上面的步骤搞了，px根本没有转换成rem，怀疑人生，而且网上也没有解决方法，所以我写这篇文章的目的就是解决px2rem无效的问题，问题的关键在于我使用的antd-mobile这个UI库,然后我又按照antd-mobile的官网的方式按需引入，[官方文档传送门][Link 1]  
,在根目录下新建了一个config-overrides.js的文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70_pic_center 1]  
**解决方法：在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;
    	}
    );

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4d564d4dec664be3bf54880887968231.png
[Link 1]: https://mobile.ant.design/docs/react/use-with-create-react-app-cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/457bb2068a5745e5a050c347171e1bc1.png