rpx-rem
v0.0.1
Published
a tool to convert rpx to rem
Downloads
14
Readme
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