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

相关文章
|
2月前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
3月前
|
JavaScript
|
4月前
|
前端开发
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
629 0
|
5月前
|
前端开发
|
资源调度
umi如何利用postcss-px-to-viewport做移动端布局?
先下载postcss-px-to-viewport npm i postcss-px-to-viewport yarn add postcss-px-to-viewport
290 1
|
编解码 前端开发
webpack进阶篇(十六):移动端 CSS px 自动转换成 rem
webpack进阶篇(十六):移动端 CSS px 自动转换成 rem
410 0
webpack进阶篇(十六):移动端 CSS px 自动转换成 rem
|
前端开发 C++
CSS之轻松实现rem适配
CSS之轻松实现rem适配
385 0
CSS之轻松实现rem适配
|
JavaScript 数据可视化
vue项目的pc端适配vw vh rem( postcss)
vue项目的pc端适配vw vh rem
450 0
vue项目的pc端适配vw vh rem( postcss)
vscode安装px to rem & rpx & vw (cssrem) 插件及配置
vscode安装px to rem & rpx & vw (cssrem) 插件及配置
1572 0
vscode安装px to rem & rpx & vw (cssrem) 插件及配置