CRA 配置其他库

CRA 配置其他库

文章目录

• • postcss-pxtorem
  • bee-mui
  • ant与antd-mobile

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+.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)
}