react项目适配flexible

在开始之前我是参考这个做的：react项目的适配。
我的在实际操作中会有点差异。

安装flexible

npm i lib-flexible --save 

安装 postcss-px2rem

npm i postcss-px2rem --save

配置webpack.config.dev.js

在目录中找到：node_modules/react-scripy/config/webpack.config.dev.js

1. const px2rem = require('postcss-px2rem');

const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in
      // package.json
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebook/create-react-app/issues/2677
        ident: 'postcss',
        // 这些是配置rem的
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          }),
          px2rem({remUnit: 75})  // 这里表示 75px = 1rem
        ],
      },
    },
    {
      loader: require.resolve('less-loader') // compiles Less to CSS
    }
  ];
  if (preProcessor) {
    loaders.push(require.resolve(preProcessor));
  }
  return loaders;
};

配置webpack.config.prod.js

在目录中找到：node_modules/react-scripy/config/webpack.config.prod.js
具体配置同上。关键代码：

plugins: () => [
  require('postcss-flexbugs-fixes'),
  require('postcss-preset-env')({
    autoprefixer: {
      flexbox: 'no-2009',
    },
    stage: 3,
  }),
  px2rem({remUnit: 75})
],

引入 import ‘lib-flexible’

在index.js中引入import 'lib-flexible'