导语：通过node一键转换px到rem，很方便的一个插件。

目录

• 程序编写
• 案例测试

程序编写

运行以下命令构建初始化环境。

$ mkdir pxtorem
$ cd pxtorem
$ npm init -y

新建以下文件

// rem.js

// 引入依赖
let path = require('path');
var fs = require('fs');
let srcPath = path.join('./src/');
let buildPath = path.join('./build/');
let baseFontSize = 16;

// 读取文件
fs.readdir(srcPath, function (err, data) {
    if (err) {
        console.error(err);
    }
    let list = data;
    console.log('building...');
    list.forEach((v,i) => {
        remBuild(v);
        if (i === list.length-1) {
            console.log('build ok!');
        }
    });
})

// 转换单位
function remBuild (filename) {  
    var css = fs.readFileSync(srcPath+filename,'utf8');
    css = css.replace(/(\d+)px/g,function(mh){
        return parseInt(mh)/baseFontSize+"rem";
    });
    console.log(srcPath+filename, buildPath+filename);
    fs.writeFile(buildPath+filename,css, (err,data) => {
        if (err) {
            console.error(err);
        }
        if (data) {
            console.log('ok');
        }
    } );
}

案例测试

• 在src文件夹里面新建一个css文件。

/* test.css */
.box {
    width: 50px;
    height: 35px;
    border: 1px solid #f00;
}

• 启动rem程序

在package.json里面的scripts加入"build": "node rem.js"

$ npm run build
> pxtorem@1.0.0 build /home/mark/dev/node/pxtorem
> node rem.js

building...
src/test.css build/test.css
build ok!

• 查看结果

在build中查看test.css

/* build/test.css */
.box {
    width: 3.125rem;
    height: 2.1875rem;
    border: 0.0625rem solid #f00;
}

最后

完美解决，下次你可以直接写一个css移动端网页，最后一转化rem，那种感觉真的很爽，不用再去换算单位了。