react umi的项目，如何只让其中一个页面支持rem？

Question

项目有很多页面，其中一个页面需要做rem的适配。现在已经用px写好了，如何用px2rem插件，只对部分页面或组件做转化？

Answer 1

用postcss-px2rem-options插件在构建的时候处理，它支持配置include配置项，可以是正则，比如项目用用了vant,但是vant的比例和工程不一致,需要针对某些包处理

 rule
                .use('postcss-loader')
                .loader('postcss-loader')
                .options(
                    Object.assign(
                        {
                            plugins: [
                                precss(),
                                postcssPresetEnv(),
                                ...(config.css.usePx2Rem
                                    ? [
                                        postcssPx2remOptions([{ remUnit: 100, include: /src|node_modules/i }, { remUnit: 50, include: /node_modules\/vant/i }]),
                                    ]
                                    : []),
                            ],
                            sourceMap: !isProd,
                        },
                        utils.getObjDeepValue(config, 'css.loaderOptions.postcss'),
                    ),
                );

注意上面有一些业务特性，仅供参考

Answer 2

最好不要用rem