postcss-pxtorem
- 注意: 引用
postcss
及其插件时,应将配置postcss
的配置项置于less/sass
等的配置项之后,以免引起错误(rewire
的本质是覆写);
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
,请明白这一点
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使用
const configBabelPluginForAntd = (config) => {
require('customize-cra').fixBabelImports('antd-mobile', {
style: 'css'
})(config)
}