vue+webpack项目中px2rem的例子

 

引言：

gitchat里有更详细的实战例子

Vue+Webpack 把 PX 转化成 REM 的实战例子

 

本文重点：

项目环境搭建此处省略，不再赘述，需要的请查阅相关资料。

本篇只介绍，如果在vue+webpack的项目中配置，把px自动转为rem

 

第一步安装   npm install   postcss-px2rem postcss --save   

 

第二步  在 webpack.base.conf.js中 引入

const webpack = require('webpack')

const px2rem = require('postcss-px2rem')
const postcss = require('postcss')

 

第三步 在module中添加如下代码：需要

  //此插件是自动把px换算成rem
  plugins: [
    new webpack.LoaderOptionsPlugin({
        // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
        vue: {
            postcss: [require('postcss-px2rem')({ remUnit: 75, propWhiteList: [] })]
        },
    })
  ]

第四步       在rules中加如下代码，css我是用到sass，less，所以需要引入对应的loader，不需要的可不写。

{
        test: /\.(css|less|scss)(\?.*)?$/,
        loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
}

第五步：测试  加入一下css

img{
  width: 200px;
  height: 200px;
}

 

重启项目编译运行以后  在浏览器查看发现已生效

 

img {

1. width: 2.666667rem;
2. height: 2.666667rem;

}

 

 

 

完结！！

如有疑问，请留言！！！