如何解决在React项目中使用Ant Design Mobile后配置的less，px转rem失效问题

1.在项目根目录配置一个config-overrides.js

2.在config-overrides.js文件内写入

const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra');
 
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        libraryDirectory: 'es',
        style: 'css',
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
    }),
    addPostcssPlugins([require('postcss-pxtorem')({
        rootValue: 37.5,
        propList: ['*']
        // propList: ['*', '!border*', '!font-size*', '!letter-spacing'],
        // propWhiteList: []
    }),])
);

3.重启项目后，它会报错显示没有postcss-pxtorem模块目录

4.下载此模板目录

npm i postcss-pxtorem -S

5.重启后会显示less-loader版本过高

6.降低less-loader版本降低

npm install -D less-loader@5.x

7.重启项目后，显示 postcss-pxtorem版本问题，然后降低

npm i postcss-pxtorem@5.1.1

8.重启项目之后就可以了

npm start