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"
            }
        ]
    },
    postcss: function() {
        return [px2viewport({viewportWidth: 736,viewportHeight:414})];
    }
}