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)
}
更多推荐
CRA 配置其他库
发布评论