react项目引入posscss实现移动端适配，px转换vw

首先，安装依赖：

　　"autoprefixer": "^8.0.0",

　　"postcss-loader": "3.0.0",

　　"postcss-plugin-px2rem": "^0.8.1",

　　"postcss-px-to-viewport": "^1.1.1",

 

接下来修改配置，我看到有的作者是在项目根目录下创建postcss.config.js，配置如下：

　　

module.exports = {
    plugins: [
      require('autoprefixer'),
      require('postcss-px-to-viewport')({
        unitToConvert: 'px',
        viewportWidth: 750,
        unitPrecision: 5,
        propList: ['*'],
        viewportUnit: 'vw',
        fontViewportUnit: 'vw',
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false,
        replace: true,
        exclude: undefined,
        include: undefined,
      }),
    ],
    remove: false,
  }
  

 

但是我配置了之后并没有效果，于是在webpack.config.js文件中配置，在100行左右的位置找到getStyleLoaders，在下面添加如下配置：

 

{
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('autoprefixer'),
            require('postcss-px-to-viewport') ({
              unitToConvert: 'px', // 要转化的单位
              viewportWidth: 750, // UI设计稿的宽度
              unitPrecision: 5, // 转换后的精度，即小数点位数
              propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
              viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
              fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
              selectorBlackList: [], // 指定不转换为视窗单位的类名，
              minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
              mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
              replace: true, // 是否转换后直接更换属性值
              exclude: undefined, // 设置忽略文件，用正则做目录名匹配
              include: undefined,
            })
          ],
          // sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },

 

最后查看效果： --> 代码：

.justifyFlex {
    width: 720px;
    margin: 20px auto 0;
    background: darkolivegreen;
    display: flex;
    align-items: stretch;
}

--> 浏览器展示：