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
8.重启项目之后就可以了
npm start