方法一：這種方法需要把配置暴露出來尚蝌，而且和antd-mobile的按需引入有沖突，會(huì)報(bào)錯(cuò)
1醉拓、 計(jì)算 js
在index.html中添加以下js
<script>
!(function(win, doc) {
function setFontSize() {
var baseFontSize = 100;
var baseWidth = 320;
var clientWidth = document.documentElement.clientWidth || window.innerWidth;
var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
var rem = 100;
if (innerWidth > 362 && innerWidth <= 375) {
rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.9);
}
if (innerWidth > 375) {
rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.84);
}
window.__baseREM = rem;
document.querySelector('html').style.fontSize = rem + 'px';
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
setFontSize();
}(window, document));
</script>
2伟姐、配置webpack.config.js
由于react默認(rèn)隱藏webpack配置需要手動(dòng)顯示。首先執(zhí)行命令顯示webpack配置
npm run eject//暴露配置
//安裝以下包：lib-flexible postcss-px2rem-exclude
npm i lib-flexible postcss-px2rem-exclude --save
修改webpack.config.js ,首先引入,然后找到處理postcss-loader的地方：
const px2rem = require('postcss-px2rem-exclude');
//加入
px2rem({remUnit:75,exclude: /node_modules/i})
3亿卤、在我們的入口文件index.js 中引入lib-flexible
import "lib-flexible"
4愤兵、最后一步修改index.html
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
注意：
網(wǎng)上有的用的是postcss-px2rem，這樣進(jìn)行移動(dòng)端適配后 自己寫的樣式雖然完全沒有問題排吴，但是如果使用Ant Design Mobile進(jìn)行開發(fā)的話秆乳，螞蟻金服的樣式會(huì)出問題導(dǎo)致無法使用。
解決方案：
配置webpack的postcss-px2rem，讓它不去檢查/node_modules/屹堰，也就是不作用antd等引入的庫肛冶。但是我去設(shè)置postcss-px2rem的exclude選項(xiàng)發(fā)現(xiàn)并沒有起作用，翻博客發(fā)現(xiàn)扯键，postcss-px2rem無法設(shè)置exclude排除項(xiàng)睦袖，然后有個(gè)人修改postcss-px2rem的源碼，做了一個(gè)postcss-px2rem-exclude可以設(shè)置排除項(xiàng)(親測有用)荣刑。
參考：https://zhuanlan.zhihu.com/p/148529375
方法二：目前沒發(fā)現(xiàn)啥bug
1.下載插件
npm i lib-flexible postcss-px2rem-exclude --save
//這個(gè)插件也要下馅笙，不然的話啟動(dòng)項(xiàng)目的時(shí)候會(huì)報(bào)錯(cuò)
npm install react-app-rewire-postcss --save-dev
2.修改config-overrides.js（如果沒有就新建，在項(xiàng)目根目錄） 在config-overrides.js文件里重寫postcss厉亏，加入如下代碼
這文件將antd-mobile的配置合并起來了董习，如果你用了antd-mobile的按需引入，那直接粘貼過去就ok爱只，antd-mobile按需引入?yún)⒄展倬W(wǎng)https://mobile.ant.design/docs/react/use-with-create-react-app-cn
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,
}),
//關(guān)鍵:設(shè)置px2rem
px2rem({
remUnit: 37.5,//這里最開始寫的是75皿淋，但是antd的樣式變的可小，查詢后看人家設(shè)置的是37.5恬试，然后試了下確實(shí)好了
exclude: /node-modules/i,
}),
],
});
return config;
}
);
參考：https://www.cnblogs.com/beyonds/p/12988329.html
https://blog.csdn.net/yuanqi3131/article/details/108220467
