react安装postcss 解决移动端大小像素单位适配问题

因为最近又在做移动端的项目,之前也使用过postcss来做过H5移动端的项目,开发体验也是非常的不错,所以还是觉得这款插件真心不错,做个笔记记录一下!

使用postcss插件来处理移动端适配问题~
当然啦,这个插件不限于什么框架,这里只是拿 react 为例!
如果是 vue脚手架 来配置的话,大同小异,可以直接跳到第二步来看!

1.安装react脚手架,并暴露webpack配置项

create-react-app demotest //创建react项目；
//react 脚手架默认是不会暴露webpack.config.js 配置文件的,需要我们手动暴露
npm run eject //手动暴露 webpack配置文件信息

等待命令完成…你会发现多了一个config文件夹.如下图:

2.下载postCss

npm install postcss-pxtorem --save-dev //下载安装postCss

3.配置
在config文件夹下,打开 webpack.config.js 文件
找到 getStyleLoaders 修改配置如下:

 const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: