px2rem

在使用手淘的flexible进行rem适配时候，可以使用px2rem，是将px转换成rem的工具，webpack有loader：px2rem-loader。

安装：npm i px2rem-loader --save-dev

配置：

// utils.js
var cssLoader = {
loader: 'css-loader',
    options: {
    sourceMap: options.sourceMap
  }
}
var px2remLoader = {
loader: 'px2rem-loader',
    options: {
    remUnit: 75
  }
}

放进loaders数组中：

// utils.js
function generateLoaders(loader, loaderOptions) {
    var loaders = [cssLoader, px2remLoader]
}

如果某项不想转化为rem：

 border: 1px solid #ccc; /* no */

修改完配置后，需要重启项目。现在在组件中写单位直接写px，设计稿多少就写多少。

 

【完】

学会了解自己才是认识世界的第一步。