postcss-pxtorem如何忽略单个属性

postcss-pxtorem如何忽略单个属性

好几天没写文章了，最近太忙了。。。。

今天分享一个关于postcss-pxtorem的hack 
先上代码看一下

const pxtorem = require('postcss-pxtorem');

new webpack.LoaderOptionsPlugin({
        options: {
          postcss: function () {
            return [
              autoprefixer(),
              pxtorem({
                rootValue: 100,
                propWhiteList: []
              })
            ];
          }
        }
      })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

这是webpack.config.js里面plugins的一段代码，他的意思是autoprefixer自动增加厂商前缀,pxtorem中rootValue为100，以100为基准值。

这样设置把你的css、less、sass里面的px自动按100的基准值转为rem，但是有一个问题，比如1px会自动变成0.01rem;亲测在很多安卓机型都不识别0.01rem,写完了你就会发现我写的边框为啥都显示不出来了！！！怎么才能让某一个属性不转化成rem呢。。。

在百度上找了半天也没有找到答案。。。

最后只能去npm的官网去好好查查postcss-pxtorem这个包的配置

具体的配置就不贴了，小伙伴们可以打开链接查看. 
在配置的后面一段是这么写的

A message about ignoring properties

Currently, the easiest way to have a single property ignored is to use a capital in the pixel unit declaration.

// `px` is converted to `rem`
.convert {
    font-size: 16px; // converted to 1rem
}

// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers
.ignore {
    border: 1Px solid; // ignored
    border-width: 2PX; // ignored
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

大致意思就是说：目前，忽略单个属性的最简单的方法是在像素单元声明中使用大写。

。。。原来这么简单，把px改成Px就行啦，亲测移动端PC端都没有问题。。。

有的时候真的不是什么问题都能在百度上找到答案的，还是要多去看官网或者翻墙出去Google。

转载：https://blog.youkuaiyun.com/hanshuoNB/article/details/77530035