(重点——由于一些朋友看完了本片文章反应了一些问题,于是乎,我又重新写了一篇更详细的文章,还增加了lib-flexible功能)
更加适合朋友们在项目中使用。文章地址如下:
移动端vue-webpack + lib-flexible + px2rem实现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 {
- width: 2.666667rem;
- height: 2.666667rem;
}
完结!!
如有疑问,请留言!!!