postcss-px2rem各种版本以及配置

postcss-px2rem的作用就是将项目的px自动转成rem。关于postcss-px2rem有多种版本。昨天我们介绍过postcss-plugin-px2rem，这个插件的优势是其配置里有exclude选项，其作用就是排除那些不需要将px转换成rem的文件。

例如，如果我们将 node_module 这个文件夹排除后，那么我们使用的前端UI框（vant, Element）的单位就不会转换成rem。

除了postcss-plugin-px2rem，还有postcss-pxtorem， postcss-px2rem两种插件。

官方文档

postcss-plugin-px2rem官方文档：https://www.npmjs.com/package/postcss-plugin-px2rem

postcss-pxtorem官方文档：https://www.npmjs.com/package/postcss-pxtorem

postcss-px2rem官方文档：https://www.npmjs.com/package/postcss-px2rem

postcss-loader官方文档：https://webpack.docschina.org/loaders/postcss-loader/

postcss-plugin-px2rem不做过多赘述，可以看下“在移动端使用amfe-flexible和postcss-plugin-px2rem做适配”这篇。

• postcss-pxtorem

配置可以在vue.config.js里，也可以在postcss.config.js

1. vue.config.js配置

安装：

npm i postcss-pxtorem --save -dev

配置：

module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({//这里是配置项，详见官方文档
rootValue : 75, // 换算的基数
selectorBlackList : ['weui','mu'], // 忽略转换正则匹配项
propList : ['*'],
}),
]
}
}
},
}

2. postcss.config.js配置

安装：

npm i postcss-pxtorem@5.1.1 postcss --save -dev

配置：

module.exports = {
  plugins: {
    autoprefixer: {},
"postcss-pxtorem": { // 把px单位换算成rem单位
      rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
      unitPrecision: 5, //允许REM单位增长到的十进制数字,小数点后保留的位数。
      propList: ['*', '!font-size'],
      // exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
      selectorBlackList: ['.radius'], //要忽略并保留为px的选择器
      // mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
      minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
    }
  }
}

注意：

如果是用vue3创建的vue项目，webpack和postcss-pxtorem的版本都不要太高，否则因版本的问题启动不起来。目前我使用的版本如下：

查看webpack的版本命令

node_modules/.bin/webpack -v

如果项目中的webpack不是我们需要的，我们可以选卸载再安装

全局卸载：

npm uninstall -g webpack

局部卸载：

npm un webpack

重新安装低版本：

npm install --save-dev webpack@x.x.x

• postcss-px2rem

1. 安装：

npm i postcss-px2rem --save -dev

2. vue.config.js配置

//方式一(?)：
const px2rem = require('postcss-px2rem')
const postcss = px2rem({
    remUnit: 75   //基准大小 baseSize，需要和rem.js中相同
})


module.exports = {
    /* 注意sass，scss，less的配置 */
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    postcss
                ]
            }
        }
    }
}


//====================================================================
//方式二：
module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({ //配置项，详见官方文档
                        remUnit: 30
                    }), // 换算的基数
                ]
            }
        }
    },
}


//====================================================================
//方式三：
var px2rem = require('postcss-px2rem');


module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 75})];
  }
}

TIPS:

1. 该插件不能转换行内样式中的 px，例如 <div style="width: 200px;"></div>
2. 如果某个样式不想转化，则可以将单位写成PX或者Px，则不进行编译。