umi 中如何使用 px2rem 插件做rem适配
- 在umi的src下面创建两个文件app.ts和document.ejs
- 下载lib-flexible和postcss-px2rem-exclude
- 在.umirc.ts文件中进行配置和postcss-px2rem-exclude的引入
- 在app.ts文件中引入lib-flexible
- 如果px2rem配置无法生效，那么我们就要在document.ejs写如下代码
在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适配
