标签：pxtorpx rpx app exclude font postcss px opts

1、postcss-pxtorem

介绍： 一款可以把px单位转成rem的插件，具体使用方法可以点击上方链接。

// postcss.config.js
module.exports = {
	plugins: [
		require('postcss-pxtorem')({
		    rootValue: 16,
		    unitPrecision: 5,
		    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],  // 若要修改全部样式，改为['*']
		    selectorBlackList: [],
		    replace: true,
		    mediaQuery: false,
		    minPixelValue: 0,
		    exclude: /node_modules/i
		})
	]
}

2、postcss-pxtorpx

介绍： 将px单位转换为适合小程序自适应的rpx单位，使用方法同postcss-pxtorem。

$ npm install postcss postcss-pxtorpx --save-dev
// postcss.config.js
module.exports = {
	plugins: [
		require('postcss-pxtorem')({
		      unitPrecision: 3,
		      propList: ['*'],
		      selectorBlackList: [],
		      replace: true,
		      mediaQuery: false,
		      minPixelValue: 1,
		      exclude: /node_modules|uview-ui/i
		})
	]
}

于是我们很高兴地引入，然后发现嗯！确实可以生效，但是有个问题是，如果我们的项目里引入了第三方库，比如适合uni-app的uview-ui或者vant weapp等，就会发现，这里的exclude并没有生效，uview-ui里的px也同样被转成了rpx，究其原因，我去看了下这个包。

// node_modules/postcss-pxtorpx/index.js
var defaults = {
  multiplier: 1,
  unitPrecision: 5,
  selectorBlackList: [],
  propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
  replace: true,
  mediaQuery: false,
  minPixelValue: 0
};

可以发现，插件里根本就没有定义rootValue和exclude这两个属性，自然就不起效果。那怎么办？
我在网上冲浪的时候发现了另一个插件postcss-px2rem-exclude，他们用这个插件来做exclude。为了转成rpx，我们可以参考postcss-px2rem-exclude里的写法，加多两句代码，自己exclude，代码如下：

// node_modules/postcss-pxtorpx/indexx.js
module.exports = postcss.plugin('postcss-pxtopx', function(options) {

  convertLegacyOptions(options);

  var opts = objectAssign({}, defaults, options);
  var pxReplace = createPxReplace(opts.multiplier, opts.unitPrecision, opts.minPixelValue);

  var satisfyPropList = createPropListMatcher(opts.propList);

  return function(css) {
  	// -------添加这两句
    if(opts?.exclude && css.source.input.file.match(opts.exclude) !== null){
        return 
    }
    // -------------
    css.walkDecls(function(decl, i) {
      // This should be the fastest test and will remove most declarations
      if (decl.value.indexOf('px') === -1) {
        return;
      }

添加之后再编译就可以了，但这并不好，因为我们不可能每次都去改包，所以另外一种做法就是，直接down下来这个包作为第三方，把它丢到src/libs里面去，然后修改一下postcss.config.js就可以了：

// 转换px to rpx
const PxToRpx = require('./src/libs/postcss-pxtorpx')
module.exports = {
	plugins: [
		PxToRpx({
	      unitPrecision: 3,
	      propList: ['*'],
	      selectorBlackList: [],
	      replace: true,
	      mediaQuery: false,
	      minPixelValue: 1,
	      exclude: /node_modules|uview-ui/i
	    }),
	]
}

注意

这里的px转rpx本质上是字符串替换，也就是说，如果你是iPhone6的话：1rpx = 0.5px，你就要把单位在原来的基础上乘2才能得到实际效果，即 原来 font-size: 14px，现在 font-size: 28px。这样会变得有点麻烦，如果你想的话，也可以改一下包，让它输入14px，输出28rpx：找到 createPxReplace 函数，在return语句里让 fixedVal 乘2。

总结

兜了一圈，其实直接写rpx就可以。

标签：pxtorpx,rpx,app,exclude,font,postcss,px,opts
来源： https://blog.csdn.net/qq_42868846/article/details/121543681

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