px2rem 邮政编码

postcs 插件 px2rem.

特征

用于 PostCSS 的插件,从像素单位生成雷姆单位.

安装

$ npm i --save postcss-plugin-px2rem

使用量

投入和产出

// input
h1 {
  margin: 0 0 20px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 1px;
}

// output
h1 {
  margin: 0 0 0.2rem;
  font-size: 0.32rem;
  line-height: 1.2;
  letter-spacing: 0.01rem;
}

原文

import { writeFile, readFileSync } from 'fs';
import postcss from 'postcss';
import pxtorem from 'postcss-plugin-px2rem';

const css = readFileSync('/path/to/test.css', 'utf8');
const options = {
  replace: false,
};
const processedCss = postcss(pxtorem(options)).process(css).css;

writeFile('/path/to/test.rem.css', processedCss, err => {
  if (err) throw err;
  console.log('Rem file written.');
});

带网络包装

import px2rem from 'postcss-plugin-px2rem';
const px2remOpts = {
  ......
};
 
export default {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!postcss-loader',
      },
    ],
  },
  postcss: [px2rem(px2remOpts)],
}

与 工具建设

webpack.connfig.js

import webpack from 'atool-build/lib/webpack';
import px2rem from 'postcss-plugin-px2rem';

export default webpackConfig => {
  const px2remOpts = {
    ......
  };
  webpackConfig.postcss.push(px2rem(px2remOpts));

  return webpackConfig;
};

配置

默认 :

{
  rootValue: 100,
  unitPrecision: 5,
  propWhiteList: [],
  propBlackList: [],
  exclude:false,
  selectorBlackList: [],
  ignoreIdentifier: false,
  replace: true,
  mediaQuery: false,
  minPixelValue: 0
}

• rootValue (数目) 根元素字体大小。 默认为100.
  • 如果 rootValue 是对象, 例如 { px: 50, rpx: 100 },它会 将 rpx 改为 1/100雷姆,并将 px 改为 1/50雷姆.
• unitPrecision (数目) 允许 REM 单位增长到的小数.
• propWhiteList (箭头) 从px到rem可以变化的属性.
  • 默认是一个空数组,它意味着禁用白色列表并启用所有属性.
  • 数值需要精确匹配.
• propBlackList (箭头) 不应从 px 到 rem 更改的属性 .
  • 数值需要精确匹配.
• exclude (Reg)一种排除一些文件夹的方法, eg. / (node module)/.
• selectorBlackList (箭头) 选择者忽略并离开 px .
  • 如果值是字符串,它会检查是否选择器包含字符串 .
    • ['body'] 将匹配 .body-class
  • 如果值是正则表达式,它会检查选择器是否匹配正则表达式.
    • [/^body$/] 将匹配 body 但没有 .body
• ignoreIdentifier (Boolean/String)一种忽略单一属性的方法,当被忽略识别器启用时,那么 replace 将设定为 true 自动.
• replace (Boolean)取代了包含雷姆的规则而不再添加倒扣.
• mediaQuery (宝莲. 允许 px 在媒体查询中转换 .
• minPixelValue (数字)设置最小像素值来替换.

许可证

麻省理工学院