2021-08-02

postcss-pxtorem

概念

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。

使用

安装依赖之后，将postcss-pxtorem的配置都放到了vue.config.js中

module.exports = {
  productionSourceMap: false, // 生产环境是否生成 SourceMap
  css: {
    loaderOptions: {
      postcss: {
        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
          }),
        ]
      }
    }
  },
}

参数解释

1）rootValue（Number | Function）表示根元素字体大小或根据input参数返回根元素字体大小。

2）unitPrecision （Number）允许REM单位增加的十进制数字。

3）propList （Array）可以从px更改为rem的属性。

值必须完全匹配。
使用通配符启用所有属性。例：[’’]
在单词的开头或结尾使用。（[‘position’]将匹配background-position-y）
使用!不匹配的属性。例：[’’, ‘!letter-spacing’]
将“ not”前缀与其他前缀组合。例：[’’, '!font’]
4）selectorBlackList （Array）要忽略的选择器，保留为px。

如果value是字符串，它将检查选择器是否包含字符串。
[‘body’] 将匹配 .body-class
如果value是regexp，它将检查选择器是否匹配regexp。
[/^body$/]将匹配body但不匹配.body
5）replace （Boolean）替换包含rems的规则。

6）mediaQuery （Boolean）允许在媒体查询中转换px。

7）minPixelValue（Number）设置要替换的最小像素值。

8）exclude（String, Regexp, Function）要忽略并保留为px的文件路径。

如果value是字符串，它将检查文件路径是否包含字符串。
‘exclude’ 将匹配 \project\postcss-pxtorem\exclude\path
如果value是regexp，它将检查文件路径是否与regexp相匹配。
/exclude/i 将匹配 \project\postcss-pxtorem\exclude\path
如果value是function，则可以使用exclude function返回true，该文件将被忽略。
回调函数会将文件路径作为参数传递，它应该返回一个布尔结果。
function (file) { return file.indexOf(‘exclude’) !== -1; }

补充

忽略单个属性的最简单方法是在像素单位声明中使用大写字母，将px写为Px。
　　比如：

.ignore {
   border: 1Px solid; // ignored
   border-width: 2PX; // ignored
}