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

相关文章
|
7月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
4月前
|
JavaScript
|
5月前
|
前端开发
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
678 0
|
5月前
|
前端开发 JavaScript
css相对单位 rem 和 em 的最佳实践
css相对单位 rem 和 em 的最佳实践
31 0
|
6月前
|
前端开发
|
编解码 前端开发
webpack进阶篇(十六):移动端 CSS px 自动转换成 rem
webpack进阶篇(十六):移动端 CSS px 自动转换成 rem
415 0
webpack进阶篇(十六):移动端 CSS px 自动转换成 rem
|
前端开发 C++
CSS之轻松实现rem适配
CSS之轻松实现rem适配
386 0
CSS之轻松实现rem适配
|
JavaScript 数据可视化
vue项目的pc端适配vw vh rem( postcss)
vue项目的pc端适配vw vh rem
459 0
vue项目的pc端适配vw vh rem( postcss)
vscode安装px to rem & rpx & vw (cssrem) 插件及配置
vscode安装px to rem & rpx & vw (cssrem) 插件及配置
1595 0
vscode安装px to rem & rpx & vw (cssrem) 插件及配置