使用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: []
    }),])
);

重啓查看結果：