React移动端项目中rem适配

678 阅读1分钟

安装px转rem包...

npm i postcss-pxtorem

npm i lib-flexible

在craco.config.js中配置

关于craco.config.js(其中的高级配置): 在 create-react-app 中使用 - Ant Design

const CracoLessPlugin = require('craco-less');

module.exports = {
  //使用less配置
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
          },
        },
      },
    },
  ],

  //移动端适配
  style: {
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [
            [
              'postcss-pxtorem',
              {
                // 设计稿375px  默认大小37.5px; 37.5px = 1rem
                rootValue: 375 / 10, // 根元素字体大小
                // propList: ['width', 'height']
                propList: ['*']
              },
            ],
          ],
        },
      },
    },
  },

};

index.js中引入lib-flexible

import 'lib-flexible'

重启项目