CRA 配置其他库

postcss-pxtorem

• 注意: 引用postcss及其插件时，应将配置postcss的配置项置于less/sass等的配置项之后，以免引起错误（rewire的本质是覆写）;

// 使用 postcss + postcss-pxtorem 进行 rem 转化
const configPost = (config) => {
  require('react-app-rewire-postcss')(config, {
    plugins: loader => [
      require('postcss-pxtorem')({
        rootValue: 108,
        unitPrecision: 5,
        propList: ['*'],
        exclude: /node_modules/i
      })
    ]
  })
}

bee-mui

• bee-mui是一个自己写的库，用它来完成一些css-reset及常用的一些css tools等
• 该库使用的是scss，请明白这一点

// npm i -S git+https://github.com/AjiMIde/bee-mui.git#branch

ant与antd-mobile

• 作为一个优秀的前端UI框架，添加ant / antd-mobile往往能达到开箱即用的效果
• cnpm i -S antd
• cnpm i -S antd-mobile

import Button from 'antd-mobile/lib/button'
import 'antd-mobile/lib/button/style/index.css'

• 这样的引入方式不太雅观且过于复杂，官方推荐使用babel-plugin-import来进行按需加载（需要修改babel-loader)
• 通常情况下你使用了CRA框架，而且使用了react-app-rewire，此时，可使用custom-cra来对babel-loader进行修改
• 这里推荐使用style:true，能大大减少代码体积，但是由于antd用的是less，所以这里要CRA支持less预载器
• (此条存疑？) 推荐使用按需加载详情见 CRA-react-app-rewired使用

// cnpm i -D babel-plugin-import
// cnpm i -D customize-cra

// 使用 custom-cra + babel-plugin-import 对 antd 产品进行按需加载
const configBabelPluginForAntd = (config) => {
  require('customize-cra').fixBabelImports('antd-mobile', {
    style: 'css'
  })(config)
}