postcss-2rem-2vw

Convert px to rem or vw

Usage no npm install needed!

<script type="module">
  import postcss2rem2vw from 'https://cdn.skypack.dev/postcss-2rem-2vw';
</script>

README

postcss-2rem-2vw

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

install

npm i postcss-2rem-2vw

Options

  • baseSize: 转换基准,默认 { rem: 75, vw: 7.5 },如原始大小为 36px ,则转换后为 0.48rem4.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
          }),
        ],
        // ...
      },
    }
  }