rpx-rem

rpx-rem

a tool to convert rpx to rem

##How to convert static files

npm install rpx-rem -g

rpx2rem

you can set a config

rpx2rem --config rpxrem.config.js

##config

default config:

    {
	    patterns: "**/*.css",
        rpxToRemRatio: 0.01,
        ignoreCss: [],
        isReplace: false,
        convertBorder1rpx: false
    }

you can create a new file in the current directory, for example: rpxrem.config.js

    module.exports = {
	    patterns: "./WrcIosselect/lib/WrcIosselect.css",
        rpxToRemRatio: 0.01,
        ignoreCss: ['font-size', 'line-height'],
        isReplace: false,
        convertBorder1px: true
    };

then you can run like this:

rpx2rem --config rpxrem.config.js

##parammeter

   patterns: visite https://www.npmjs.com/package/glob to see pattern

   rpxToRemRatio: the ratio of rpx and rem

ignoreCss: will not convert the CSS property

isReplace: whether or not to replace the original file

   convertBorder1rpx: whether or not to convert 1 pixel wide border

---

##How to use as a webpack loader

package.json:

    "devDependencies": {
        "rpx-rem": "*"
    }

in webpack.config.js:

    module.exports = {
        node: {
            fs: "empty"
        },
        module: {
            loaders: [
                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader!rpx-rem!postcss-loader!less-loader'
                }
            ]
        }
    }

If you use less-loader, sass-loader, postcss-loader and other processing tools, you need to put rpx-rem on their left

you must create a file called rpxrem.webpack.conf.json in the project root directory (same directory with package.json) like this:

    {
        "rpxToRemRatio": 0.01,
        "ignoreCss": [],
        "convertBorder1rpx": true
    }

then you can convert rpx to rem in your project