復(fù)制了 CallMeXYZ 的插件，修復(fù)了包含 media query 的 bug
(media query 是不能改變的，如：@media (max-width:640px))
px2rem
開發(fā)響應(yīng)式網(wǎng)頁，尤其是手機端蜈亩，常常采取rem單位。這個webpack的小loader主要是省去了每次輸入長、寬铸敏、字體等都要把像素px換算成rem的麻煩，
開發(fā)時直接輸入px,最后打包打包時換算為rem悟泵。
價格
1個 github star 哈哈哈哈
內(nèi)容列表
介紹
這是你原先的css或者js代碼
// css
div {
font-size: 14px;
width: 100px;
}
// js 例如 react
<Page style={{ fontSize: '14px', width: '100px' }} />
采取默認(rèn)的 1rem=10px 轉(zhuǎn)化后變成
// css
div {
font-size: 1.400rem;
width: 10rem;
}
// js such as in react
<Page style={{ fontSize: '1.400rem', width: '10rem' }} />
安裝
npm install webpack-px2rem-loader --save-dev
使用
//in your webpack.config.js
module.exports={
...
module:{
// 或者 loaders
rules:[
{
test:/\.jsx$/,
loader:'webpack-px2rem-loader',
// 這個配置是可選的
query:{
// 1rem=npx 默認(rèn)為 10
basePx:10,
// 只會轉(zhuǎn)換大于min的px 默認(rèn)為0
// 因為很小的px（比如border的1px）轉(zhuǎn)換為rem后在很小的設(shè)備上結(jié)果會小于1px杈笔，有的設(shè)備就會不顯示
min:1,
// 轉(zhuǎn)換后的rem值保留的小數(shù)點后位數(shù) 默認(rèn)為3
floatWidth:3
}
}
]
}
}
插件地址
https://www.npmjs.com/package/webpack-px2rem-loader
https://npm.taobao.org/package/webpack-px2rem-loader
