umi配置chainWebpack，使用自定义loader----jsx-px2rem

最新推荐文章于 2025-04-05 10:40:56 发布

ggggmlor

最新推荐文章于 2025-04-05 10:40:56 发布

阅读量2.2w

点赞数 6

分类专栏： react umi webpack 文章标签： umi chainWebpack loader

本文链接：https://blog.youkuaiyun.com/qq_37728271/article/details/100519531

版权

本文介绍了如何在umi框架中，由于缺少将jsx中px转为rem的插件，作者自制了一个jsx-px2rem-loader并详细阐述了配置chainWebpack的过程，包括loader的编写和webpack配置的修改，解决在umi项目中处理px到rem转换的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

吐槽：

最初追随潮流，老大看到了umi这个国人开发标签的框架，觉得可以尝试，并且相信阿里。从此开始了填坑之路。。。

虽然云谦大佬在github上说了，umi本身的配置已经很完善了，但是肯定满足不了所有人各种各样的奇葩需求。。。

比如今天说的将jsx中的style里，将px转换为rem。

umi本身提供了postcss、cssloader等，但是要想将jsx中的px转换成rem，并未找到相关的插件。就只有手写一个loader，然后再修改umi的webpack配置了。

loader：

jsx-px2rem-loader.js:

import regRules from './reg';
import _ from 'lodash';    // lodash是一个js工具库，特别方便建议各位去了解一下

module.exports = function(source) {
  if (this.cacheable) {
    this.cacheable();
  }
  let backUp = source;

  // style={
  {marginRight: '1px'}} => style={
  {marginRight: '0.01rem'}}
  if (regRules.pxReg.test(backUp)) {
    backUp = backUp.replace(regRules.pxReg, p