react的create-react-app移动端rem适配

傲视之巅

1. 安装：

1. npm install lib-flexible postcss-pxtorem -S

复制代码

2. 引入

在项目入口文件index.js引入lib-flexible

1. import 'lib-flexible';

复制代码

3. 修改webpack.config.js

3.1 初始化设置

1. npm run eject

复制代码

这时候大概会报错

办理方案
git init
git add .
git commit -m 'init'
3.2. 修改webpack.config.js

先引入：

1. const pxtorem = require('postcss-pxtorem')

复制代码

 然后找到postcss-loader 更换一下，注释的部分加入

1. {
2.   loader: require.resolve('postcss-loader'),
3.   options: {
4.     ident: 'postcss',
5.     plugins: () => [
6.       require('postcss-flexbugs-fixes'),
7.       require('postcss-preset-env')({
8.         autoprefixer: {
9.           flexbox: 'no-2009',
10.         },
11.         stage: 3,
12.       }),
13.       postcssNormalize(),
14.       // 新增加---------------------------------------------
15.       pxtorem({
16.         rootValue: 37.5,
17.         propWhiteList: [],
18.         minPixelValue: 2,
19.         exclude: /node_modules/i
20.       })
21.       //--------------------------------------------------
22.     ],
23.     sourceMap: isEnvProduction && shouldUseSourceMap,
24.   },
25. },

复制代码

这时候会报错大概是版本过高
办理思路：
https://www.cnblogs.com/liangziaha/p/14492288.html
办理方案：
npm i postcss-pxtorem@5.1.1

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！