vue+webpack專案中px2rem的例子
引言:
gitchat裡有更詳細的實戰例子
本文重點:
專案環境搭建此處省略,不再贅述,需要的請查閱相關資料。
本篇只介紹,如果在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;
}
完結!!
如有疑問,請留言!!!