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

相关文章
|
9月前
|
资源调度
Vue3 + Vite 构建组件库发布到 npm
这篇文章介绍了如何使用Vue3和Vite构建组件库并发布到npm,包括初始化项目、配置项目结构、创建组件目录、设置入口文件以及导出组件等步骤。
1232 0
Vue3 + Vite 构建组件库发布到 npm
|
1月前
|
弹性计算 安全 Linux
阿里云ECS云服务器秒级部署OpenClaw教程:千问Qwen3.6-Plus接入+本地多系统适配+避坑指南
2026年,OpenClaw(原Clawdbot)已成为AI自动化代理领域的标杆级开源框架,凭借数据可控、跨平台兼容、大模型生态完善的核心优势,成为个人与团队搭建专属智能助手的首选方案。阿里云ECS云服务器提供OpenClaw官方预装镜像,实现秒级创建、一键启动、7×24小时稳定运行,完美适配长期在线场景;同时支持本地MacOS、Linux、Windows11全平台部署,满足隐私与离线需求。本文全程提供可直接复制的代码命令,从阿里云ECS秒级部署、本地多系统安装、千问Qwen3.6-Plus API配置,到新手高频问题避坑指南,形成完整闭环,零基础用户也能快速完成全流程搭建,无需任何Linux
1172 7
|
6月前
|
机器学习/深度学习 人工智能 前端开发
终端里的 AI 编程助手:OpenCode 使用指南
OpenCode 是开源的终端 AI 编码助手,支持 Claude、GPT-4 等模型,可在命令行完成代码编写、Bug 修复、项目重构。提供原生终端界面和上下文感知能力,适合全栈开发者和终端用户使用。
50807 11
|
前端开发 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
1794 2
|
前端开发 JavaScript 开发者
探究单页应用(SPA)与多页应用(MPA):技术的选择与对比
在当今快节奏的互联网时代,单页应用(SPA)和多页应用(MPA)是两种常见的前端开发架构。本文将深入探讨这两种应用类型的特点、优势和不足,并提供一些帮助开发者做出选择的指导。
em/px/rem/vh/vw区别
【10月更文挑战第24天】理解和掌握 em、px、rem、vh、vw 这几种单位的特点和应用,能够帮助我们更好地进行网页设计和布局,实现更优秀的用户体验和适应不同屏幕尺寸的能力。
|
JavaScript
postcss pxtorem 配置
【8月更文挑战第9天】
|
前端开发 JavaScript API
一篇文章掌握Next.js的核心要点
一篇文章掌握Next.js的核心要点
2095 0
一篇文章掌握Next.js的核心要点
|
存储 人工智能 数据库
RAG流程优化(微调)的4个基本策略
在本文中,我们将介绍使用私有数据优化检索增强生成(RAG)的四种策略,可以提升生成任务的质量和准确性。通过使用一些优化策略,可以有效提升检索增强生成系统的性能和输出质量,使其在实际应用中能够更好地满足需求。
720 0
List中的remove方法遇到报错不能删除以及四种解决办法点赞收藏
List中的remove方法遇到报错不能删除以及四种解决办法点赞收藏
809 0