umi 中如何使用 px2rem 插件做rem适配

简介: 在umi的src下面创建两个文件app.ts和document.ejs

在umi的src下面创建两个文件app.ts和document.ejs

be797454b3044c1f88c01b036e7736e3.png

下载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适配

相关文章
|
12月前
Nuxt中Rem适配
Nuxt中Rem适配
205 0
Nuxt中Rem适配
|
13天前
|
前端开发
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
42 0
|
11天前
|
前端开发 JavaScript
css相对单位 rem 和 em 的最佳实践
css相对单位 rem 和 em 的最佳实践
9 0
|
18天前
|
前端开发
|
编解码 前端开发
webpack进阶篇(十六):移动端 CSS px 自动转换成 rem
webpack进阶篇(十六):移动端 CSS px 自动转换成 rem
357 0
webpack进阶篇(十六):移动端 CSS px 自动转换成 rem
|
前端开发 C++
CSS之轻松实现rem适配
CSS之轻松实现rem适配
348 0
CSS之轻松实现rem适配
|
JavaScript 数据可视化
vue项目的pc端适配vw vh rem( postcss)
vue项目的pc端适配vw vh rem
390 0
vue项目的pc端适配vw vh rem( postcss)
vscode安装px to rem & rpx & vw (cssrem) 插件及配置
vscode安装px to rem & rpx & vw (cssrem) 插件及配置
1382 0
vscode安装px to rem & rpx & vw (cssrem) 插件及配置
|
Web App开发 前端开发 JavaScript
动态REM
动态REM
|
前端开发
游乐园项目(rem)
游乐园项目(rem)
100 0
游乐园项目(rem)