使用antd-mobile+less+ts+flexible+px2rem 搭建基础项目，无需暴露配置

调查发现现在使用create-react-app 网上的文章怎么都实现不了自动px2rem，，故捯饬了一下：

1、使用create-react-app 安装ts版本

npx create-react-app demo-ts --typescript

2、进入项目 打开ide

cd demo-ts
code . // 进入vscode

3、安装UI、react-app-rewired（自定义启动配置）和按需加载模块

antd-mobile
react-app-rewired customize-cra
babel-plugin-import

yarn add antd-mobile react-app-rewired customize-cra babel-plugin-import

修改启动配置 package.json:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

4、然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        libraryDirectory: 'es',
        style: 'css',
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
    })
);

5、如果不放心，可以先yarn start 启动并编写一个less文件试试，报错：Cannot find module 'less-loader'

安装：

yarn add less less-loader

6、安装px2rem

yarn add postcss-pxtorem lib-flexible

1、根目录index.jsx 引入lib-flexible  实现动态根px变化：

import "lib-flexible"

2、修改配置文件，以支持px2rem， config-overrides.js:

const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        libraryDirectory: 'es',
        style: 'css',
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
    }),
    addPostcssPlugins([require('postcss-pxtorem')({
        rootValue: 37.5,
        propList: ['*']
        // propList: ['*', '!border*', '!font-size*', '!letter-spacing'],
        // propWhiteList: []
    }),])
);

重启查看结果：