pxtorem使用内容记录

安装

npm install amfe-flexible --save

npm install postcss-pxtorem --save-dev

使用

mian.js内引用文件

import 'amfe-flexible'

配置文件

项目根目录创建文件 postcss.config.js（新版插件会自动创建该文件）

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      rootValue: 37.5,
      propList: ["*"],
      minPixelValue: 12,
     }
  }
};

具体配置如下：

rootValue（Number | Function）根目录字体大小，默认37.5。

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

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

replace（Boolean）替换包含rems的规则。

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

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

• 值必须完全匹配。
• 使用通配符*启用所有属性。例：['*']
• *在单词的开头或结尾使用。（['*position*']将匹配background-position-y）
• 使用!不匹配的属性。例：['*', '!letter-spacing']
• 将“ not”前缀与其他前缀组合。例：['*', '!font*']

selectorBlackList（Array）要忽略的选择器，保留为px。

• 如果value是字符串，它将检查选择器是否包含字符串。
  • ['body'] 将匹配 .body-class
• 如果value是regexp，它将检查选择器是否匹配regexp。
  • [/^body$/]将匹配body但不匹配.body

exclude（String, Regexp, Function）将忽略px转rem的文件。

• 如果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; }