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

相关文章
|
前端开发 测试技术 容器
React 快速实现拖拽改变容器宽高度
React 快速实现拖拽改变容器宽高度
1065 0
|
存储 前端开发 JavaScript
React中如何动态添加和删除元素
React中如何动态添加和删除元素
667 0
|
Web App开发 缓存 搜索推荐
HTML中meta标签中属性详解并设置页面缓存策略
HTML中meta标签中属性详解并设置页面缓存策略
2283 0
Echarts实战案例代码(23):富文本实现坐标轴文字和图片排版的解决方案
Echarts实战案例代码(23):富文本实现坐标轴文字和图片排版的解决方案
608 0
axios设置请求头无效
axios设置请求头无效
1602 0
|
5月前
|
存储 弹性计算 人工智能
2026年阿里云新用户定义及新人专属优惠活动
阿里云新用户指无付费订单的注册会员,首购享超值特惠:轻量服务器低至38元/年、ECS 99元起,叠加新人券与160+款产品免费试用,助个人及企业轻松上云!
2170 5
|
5月前
|
弹性计算 安全 Linux
阿里云ECS云服务器秒级部署OpenClaw教程:千问Qwen3.6-Plus接入+本地多系统适配+避坑指南
2026年,OpenClaw(原Clawdbot)已成为AI自动化代理领域的标杆级开源框架,凭借数据可控、跨平台兼容、大模型生态完善的核心优势,成为个人与团队搭建专属智能助手的首选方案。阿里云ECS云服务器提供OpenClaw官方预装镜像,实现秒级创建、一键启动、7×24小时稳定运行,完美适配长期在线场景;同时支持本地MacOS、Linux、Windows11全平台部署,满足隐私与离线需求。本文全程提供可直接复制的代码命令,从阿里云ECS秒级部署、本地多系统安装、千问Qwen3.6-Plus API配置,到新手高频问题避坑指南,形成完整闭环,零基础用户也能快速完成全流程搭建,无需任何Linux
1985 7
|
10月前
|
机器学习/深度学习 人工智能 前端开发
终端里的 AI 编程助手:OpenCode 使用指南
OpenCode 是开源的终端 AI 编码助手,支持 Claude、GPT-4 等模型,可在命令行完成代码编写、Bug 修复、项目重构。提供原生终端界面和上下文感知能力,适合全栈开发者和终端用户使用。
60518 11
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
687 154
|
前端开发 JavaScript
umi 中useSearchParams 的使用样例
在umi中,`useSearchParams`是一个React Hook,用于获取和操作URL查询参数。以下是一个使用`useSearchParams`的样例: 首先,确保你已经安装了umi和react-router-dom。 1. 在页面组件中使用`useSearchParams`来获取和操作URL查询参数: ```javascript import { useSearchParams } from 'umi'; export default function SearchPage() { const [searchParams, setSearchParams] = useSea
1921 2

热门文章

最新文章