postcss-2rem-2vw

用于转换 px 单位至 rem 和 vw 单位。

install

npm i postcss-2rem-2vw

Options

• baseSize: 转换基准，默认 { rem: 75, vw: 7.5 }，如原始大小为 36px ,则转换后为 0.48rem 和 4.8vw。
• precision: 默认 6 ，转换保留有效位数。
• forceRemProps: 只生成 rem 单位，不生成 vw 单位的属性。
• keepRuleComment: 默认 'no' ，不转换的行注释。
• keepFileComment: 默认 'px2rem2vw-disable' ，不转换的文件注释。
• toRem: 默认 true，是否生成 rem 单位。
• toVw: 默认 true，是否生成 vw 单位。

Usage

Postcss

import postcss from "postcss";
import pxToRemVw from "postcss-2rem-2vw";
const opts = {};

postcss([pxToRemVw(opts)])
  .process(css, { from: "./input.css", to: "./output.css" })
  .then(result => {
    fs.writeFileSync("./output.css", result.css);
    if (result.map) fs.writeFile("./output.css.map", result.map);
  })
  .catch(err => {
    console.error(err);
  });

postcss-loader

  {
    test: /.css$/,
    loader: {
      loader: require.resolve('postcss-loader'),
      options: {
        // ...
        plugins: () => [
          // ...
          require('postcss-2rem-2vw')({
            baseSize: {
              rem: 750,
              vw: 7.5
            },
            precision: 6,
            forceRemProps: [ 'font', 'font-size' ],
            keepRuleComment: 'no',
            keepFileComment: 'px2rem2vw-disable',
            toVw: shouldPostCssGenVw,
            toRem: shouldPostCssGenRem
          }),
        ],
        // ...
      },
    }
  }