react项目中px转rem

2021-08-25 17:04:45 阅读：255 来源： 互联网

标签：lib px2rem px loader react rem exclude postcss flexible

第一步：安装 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

标签：lib,px2rem,px,loader,react,rem,exclude,postcss,flexible
来源： https://blog.csdn.net/weixin_57163112/article/details/119914823

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react项目中px转rem