復(fù)制了 CallMeXYZ 的插件，修復(fù)了包含 media query 的 bug
(media query 是不能改變的，如：@media (max-width:640px))

px2rem

開發(fā)響應(yīng)式網(wǎng)頁，尤其是手機(jī)端，常常采取rem單位。這個(gè)webpack的小loader主要是省去了每次輸入長、寬、字體等都要把像素px換算成rem的麻煩，
開發(fā)時(shí)直接輸入px,最后打包打包時(shí)換算為rem。

價(jià)格

1個(gè) 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',
                // 這個(gè)配置是可選的
                 query:{
                    // 1rem=npx 默認(rèn)為 10
                    basePx:10,
                    // 只會轉(zhuǎn)換大于min的px 默認(rèn)為0
                    // 因?yàn)楹苄〉膒x（比如border的1px）轉(zhuǎn)換為rem后在很小的設(shè)備上結(jié)果會小于1px，有的設(shè)備就會不顯示
                    min:1,
                    // 轉(zhuǎn)換后的rem值保留的小數(shù)點(diǎn)后位數(shù) 默認(rèn)為3
                    floatWidth:3
                }

            }
        ]
    }
  }

插件地址

https://www.npmjs.com/package/webpack-px2rem-loader
https://npm.taobao.org/package/webpack-px2rem-loader

你不想 star 一個(gè)嗎？

https://github.com/LiangWei88/webpack-px2rem-loader