umi 中使用 px2rem 插件

1.下载依赖

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

2.在.umirc.ts文件中 配置

const px2rem = require('postcss-px2rem-exclude');

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

如图：

3.在入口文件中引入flexible.js

入口文件一般就是index.txs

import 'lib-flexible';

4.px2rem配置无法生效问题

1. 控制台会有警告，是umi本身设置了<meata>标签，导致flexible.js没有生效。

2. 
   看控制台font-size:37.5px,也还是umi的配置。
   

3. umi里默认没有html的入口文件，要新建 src/pages/document.ejs

4. umi 约定如果这个文件存在，会作为默认模板
   设置之后再刷新页面检查：