webpack配置postcss-px2viewport

什么是postcss-px2viewport?

http://npm.taobao.org/package/postcss-px2viewport
一个postcss插件，结合viewport.js使用默认使用

vw

作为布局单位，对于不支持

vw

单位的，则使用

rem

进行布局对于标记了

/*px*/

的，则转换为

[data-dpr="1"]

、

[data-dpr="2"]

、

[data-dpr="3"]

三种不同的字体对于标记了

/*no*/

的，则不做处理，依然使用px进行布局

配置过程

首先确定安装了
npm install postcss-loader --save-dev
然后根目录下创建postcss.config.js
填入以下内容:
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-px2viewport')
],
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}

4000
]
},
postcss: function() {
return [px2viewport({viewportWidth: 736,viewportHeight:414})];
}
}