Umi创建react项目之配置额外的 postcss 插件。

步骤1：

安装插件：

注意：安装6.x.x版本的postcss-pxtorem ，会报错 [object Object] is not a PostCSS plugin

npm i lib-flexible -D

npm i postcss-pxtorem@5.1.1 -D

步骤2：

在.umirc.ts文件中添加

import { defineConfig } from 'umi';
const pxtorem = require('postcss-pxtorem')

export default defineConfig({
  extraPostCSSPlugins: [ //配置额外的 postcss 插件。
    pxtorem({
      rootValue: 10, // 指定转换倍率，我现在设置这个表示1rem=10px;
      propList: ['*'], // 属性列表，表示你要把哪些css属性的px转换成rem，这个*表示所有
      selectorBalckList: ['.am-'], // 匹配不被转换为rem的选择器，例如UI框架antd-mobile
      exclude: /node_modules/i,
    }),
  ]
});

在app.ts文件中引入lib-flexible

import 'lib-flexible'