安装px转rem包...
npm i postcss-pxtorem
npm i lib-flexible
在craco.config.js中配置
关于craco.config.js(其中的高级配置): 在 create-react-app 中使用 - Ant Design
const CracoLessPlugin = require('craco-less');
module.exports = {
//使用less配置
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
},
},
},
},
],
//移动端适配
style: {
postcss: {
mode: 'extends',
loaderOptions: {
postcssOptions: {
ident: 'postcss',
plugins: [
[
'postcss-pxtorem',
{
// 设计稿375px 默认大小37.5px; 37.5px = 1rem
rootValue: 375 / 10, // 根元素字体大小
// propList: ['width', 'height']
propList: ['*']
},
],
],
},
},
},
},
};
index.js中引入lib-flexible
import 'lib-flexible'