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: 001 ignoreCss: isReplace: false convertBorder1rpx: false
you can create a new file in the current directory, for example: rpxrem.config.js
moduleexports = patterns: "./WrcIosselect/lib/WrcIosselect.css" rpxToRemRatio: 001 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:
moduleexports = 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": 001 "ignoreCss": "convertBorder1rpx": true
then you can convert rpx to rem in your project