react项目中px转rem

第一步:安装 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
上一篇:Ubuntu server16.04安装配置驱动418.87、cuda10.1、cudnn7.6.4.38、anaconda、pytorch超详细解决


下一篇:2021.08.26 【ABAP随笔】- OO ALV开发模版 (震惊,输出一个OO ALV只需要几行代码,瞎扯)