在 React + UmiJS 项目中使用 postcss-plugin-px2rem + lib-flexible 的完整指南

我是一颗跳跳糖@

于 2025-04-03 15:01:45 发布

阅读量767

点赞数 6

文章标签： react.js postcss 前端

本文链接：https://blog.youkuaiyun.com/qq_43570260/article/details/146980837

版权

1. 安装必要依赖

首先安装所需依赖包：

npm install lib-flexible postcss-plugin-px2rem --save-dev
# 或者使用 yarn
yarn add lib-flexible postcss-plugin-px2rem -D

2. 配置 UmiJS 项目

2.1 方法一：通过 .umirc.ts 配置（推荐）

在项目根目录下的 .umirc.ts 文件中添加配置：

// .umirc.ts
import { defineConfig } from 'umi';

export default defineConfig({
  // 其他配置...
  extraPostCSSPlugins: [
    require('postcss-plugin-px2rem')({
      rootValue: 75, // 设计稿宽度/10（750px设计稿→75）
      propList: ['*'], // 转换所有属性
      exclude: /node_modules/i, // 排除node_modules
      mediaQuery: false // 不转换媒体查询中的px
    })
  ],

// 项目用pnpm下载依赖需要配置,推荐使用pnpm
npmClient:'pnpm'
});

2.2 方法二：通过 config/config.ts 配置

如果项目使用 config/config.ts：

// config/config.ts
import { defineConfig } from 'umi';

export default defineConfig({
  // 其他配置...
  extraPostCSSPlugins: [
    require('postcss-plugin-px2rem')({
      rootValue: 75,
      propList: ['*'],
      selectorBlackList: ['ant'], // 过滤antd前缀的类名
      minPixelValue: 2 // 小于2px不转换
    })
  ]
});

3. 引入 lib-flexible

3.1 在入口文件引入

在 src/app.ts 中引入 lib-flexible：

// src/app.ts
import 'lib-flexible';

3.2 或者在 layouts/index.tsx 中引入

// src/layouts/index.tsx
import 'lib-flexible';

export default function Layout({ children }) {
  return <>{children}</>;
}

4. 配置 HTML 模板

在umirc.ts里面配置中添加 viewport meta 标签：

// .umirc.ts
import { defineConfig } from 'umi';

export default defineConfig({
  // 其他配置...
  extraPostCSSPlugins: [
    require('postcss-plugin-px2rem')({
      rootValue: 75, // 设计稿宽度/10（750px设计稿→75）
      propList: ['*'], // 转换所有属性
      exclude: /node_modules/i, // 排除node_modules
      mediaQuery: false // 不转换媒体查询中的px
    })
  ],

// 项目用pnpm下载依赖需要配置,推荐使用pnpm
npmClient:'pnpm',
// 配置meta
metas:[
name:'viewport',
concent:'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
]
});

运行 HTML

5. 编写样式示例

// src/pages/index.module.less
.container {
  width: 750px;  // 转换为10rem
  padding: 20px; // 转换为0.2667rem
  
  .title {
    font-size: 32px; // 转换为0.4267rem
    color: #333;
    
    // 不转换的样式
    &.no-rem {
      margin: 10PX; // 使用大写PX保持原样
    }
  }
}

6. 高级配置选项

6.1 多倍屏适配配置

// .umirc.ts
extraPostCSSPlugins: [
  require('postcss-plugin-px2rem')({
    rootValue: {
      px: 75,     // 普通屏
      '2x': 37.5  // Retina屏（DPR=2）
    },
    // 其他配置...
  })
]

6.2 自定义排除规则



// .umirc.ts
extraPostCSSPlugins: [
  require('postcss-plugin-px2rem')({
    rootValue: {
      px: 75,     // 普通屏
      '2x': 37.5  // Retina屏（DPR=2）
    },
    // 其他配置...
    exclude: /(node_modules|antd|@antd)/i, // 排除antd等库
    selectorBlackList: ['am-', 'ant-'] // 过滤特定前缀
  })
]

7. 常见问题解决方案

7.1 第三方组件库样式问题

如果使用 Ant Design 等UI库，建议排除转换：

exclude: /(node_modules|antd|@antd)/i

7.2 1px边框问题处理

.border {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #ddd;
    transform: scaleY(0.5);
    transform-origin: 0 0;
  }
}

7.3 热更新失效问题

如果修改样式后热更新不生效，尝试：

检查配置是否正确
重启开发服务器
清除缓存后重新启动

8. 项目结构示例

umi-project/
├── config/
│   └── config.ts       # UmiJS配置
├── src/
│   ├── app.ts          # 引入lib-flexible
│   ├── layouts/
│   │   └── index.tsx   # 布局组件
│   └── pages/
│       ├── index.tsx
│       └── index.module.less
├── .umirc.ts           # *主配置文件
└── package.json