摘要：
1.安装lib-flexible、postcss-px2remyarnaddlib-flexiblepostcss-px2rem-exclude--save2.index.js文件引入import'lib-flexible';3.config-overrides.js文件覆盖const{override,fixBabelImports,addLessLoader}=require('customi
1.安装lib-flexible、postcss-px2rem
yarn add lib-flexible postcss-px2rem-exclude --save
2.index.js文件引入
import 'lib-flexible';
3.config-overrides.js文件覆盖
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const rewirePostcss = require("react-app-rewire-postcss");
const px2rem = require("postcss-px2rem-exclude");
const theme = require('./antd-theme');
module.exports = override(
addLessLoader({
javascriptEnabled: true,
modifyVars: theme,
}),
fixBabelImports('import', {
libraryName: 'antd-mobile',
libraryDirectory: 'es',
style: true
}),
(config, env) => {
// 重写postcss
rewirePostcss(config, {
plugins: () => [
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
}),
//关键:设置px2rem
px2rem({
remUnit: 37.5,
exclude: /node-modules/i,
}),
],
});
return config;
}
);
4.public/index.html 增加meta标签
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />