ts项目配置rem-5

1.下载postcss-pxtorem插件

 npm install postcss-pxtorem@5.1.1  --save 

npm install  lib-flexible --save 

npm install react-app-rewire-postcss --save 

2.修改下config-overrides.js内容

const {
    override,
    addDecoratorsLegacy,
    disableEsLint,
    addWebpackAlias,
    fixBabelImports,
    addLessLoader,
    addPostcssPlugins
} = require("customize-cra")
const path = require("path");

const darkThemeVars = require('antd/dist/dark-theme');


module.exports = {
    webpack: override(
      // 添加装饰器
    addDecoratorsLegacy(),

    disableEsLint(),

    // 设置路径别名
    addWebpackAlias({
        '@': path.resolve(__dirname, 'src'),
    }),

    // 按需加载
    fixBabelImports("import", {
        libraryName: "antd",
        libraryDirectory: "es",
        style: true
    }),

    // 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {
            'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`,
            ...darkThemeVars,
            '@primary-color': '#6e41ff',
        },
    }),

      // 配置px转rem
      addPostcssPlugins(
        [require('postcss-pxtorem')({ 
            rootValue: 192,   //ui设计图的尺寸/10
            propList: ['*'],
            minPixelValue: 2,   //最小px不转换
      })]),
    ),
  };

3.index.ts 文件添加

import 'lib-flexible'

4.pubilc->index.html 添加mate

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

5.修改lib-flexible插件

node_modules->lib-flexible->lib-flexible.js 搜索 refreshRem，修改成如下代码，解决pc端适应。

 function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
      width = width * dpr;
   }
   var rem = width / 10;
   docEl.style.fontSize = rem + 'px';
    flexible.rem = *win*.rem = rem;
  }