第一步:安装 postcss-px2rem-exclude、lib-flexible、sass-loader、node-sass
npm insatll lib-flexible sass-loader node-sass postcss-px2rem-exclude --save
第二步:找到webpack.config.js
路径:node_modules>react-scripts>config>webpack.config.js
先引入postcss-px2rem-exclude,然后在postcss-loader的plugins中加入
const px2rem = require('postcss-px2rem-exclude');
修改一下
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
//px2rem加在这里
px2rem({
remUnit:75,exclude: /node_modules/i
})
],
},
},
第三步:在react入口文件引入lib-flexible
import "lib-flexible"
第四步:修改index.html 禁止缩放
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
第五步:完成后重启才能生效。
npm start