第一步:安装 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
原文地址:https://blog.csdn.net/weixin_57163112/article/details/119914823
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。