umi 中使用 px2rem 插件做rem适配

最新推荐文章于 2024-06-13 09:45:33 发布

夏兮颜☆

最新推荐文章于 2024-06-13 09:45:33 发布

阅读量433

点赞数

分类专栏： umi 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_69892739/article/details/129814832

版权

umi 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

目录标题

一、首先下载依赖
二、在.umirc.ts文件中进行配置
三、在入口文件index.js中进行引用flexible.js或者是新建一个app.ts文件中引入lib-flexible
- - 如果px2rem配置无法生效，那么我们就要在document.ejs写如下代码:

一、首先下载依赖

npm i lib-flexible postcss-px2rem-exclude --save

二、在.umirc.ts文件中进行配置

// 在外部进行引用
const px2rem = require('postcss-px2rem-exclude');

export default defineConfig({
   extraPostCSSPlugins: [
    px2rem({
      remUnit: 37.5,
      exclude: '/node_modules/i',
    }),
  ],
})

三、在入口文件index.js中进行引用flexible.js或者是新建一个app.ts文件中引入lib-flexible

import 'lib-flexible';

如果px2rem配置无法生效，那么我们就要在document.ejs写如下代码:

umi里默认没有html的入口文件，要新建 src/pages/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>

在这里插入图片描述