react lib-flexible postcss-px2rem集成

1.安裝lib-flexible、postcss-px2rem

yarn add lib-flexible postcss-px2rem-exclude --save

2.index.js文件引入

import 'lib-flexible';

 

3.config-overrides.js文件覆蓋

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const rewirePostcss = require("react-app-rewire-postcss");
const px2rem = require("postcss-px2rem-exclude");
const theme = require('./antd-theme');

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: theme,
  }),
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    libraryDirectory: 'es',
    style: true
  }),
  (config, env) => {
    // 重寫postcss
    rewirePostcss(config, {
      plugins: () => [
        require("postcss-flexbugs-fixes"),
        require("postcss-preset-env")({
          autoprefixer: {
            flexbox: "no-2009",
          },
          stage: 3,
        }),
        //關鍵:設置px2rem
        px2rem({
          remUnit: 37.5,
          exclude: /node-modules/i,
        }),
      ],
    });

    return config;
  }
);

　4.public/index.html 增加meta標簽

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />