在umi的src下面创建两个文件app.ts和document.ejs
下载lib-flexible和postcss-px2rem-exclude
npm i lib-flexible
npm i postcss-px2rem-exclude
在.umirc.ts文件中进行配置和postcss-px2rem-exclude的引入
const px2rem = require('postcss-px2rem-exclude'); favicon: "/favicon.ico", fastRefresh: {}, extraPostCSSPlugins: [ px2rem({ remUnit: 37.5, exclude: '/node_modules/i', }), ],
在app.ts文件中引入lib-flexible
import 'lib-flexible'
如果px2rem配置无法生效,那么我们就要在document.ejs写如下代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
这样就完成了rem适配