webpack loader插件之postcss(以及一些常用插件)


postcss工具包是為了管理css文件:

 {
    loader: 'postcss-loader',
    options:{
      plugins: [
        require('postcss-easy-import')({ prefix: '_' }), //文件名引入加前綴
        require('postcss-plugins-px2rem')({remUnit: 75}), // 移動端可用 px => rem轉換(flexible.js中75px:1rem)
        require('postcss-modules')({
          generateScopedName: '[local]-[hash:base64:5]' //postcss-modules模塊給class名加后綴,防止同命名被覆蓋
          }),
        require('precss')(), //sass解析
        require('cssnano')(), //相同css合並(例:.a{width:100px},.b{width:100px} => .a,.b{width:100px})
        require('autoprefixer')({
        browsers:[
            '>0%',
            'last 4 versions',
            'Firefox ESR',
         'not ie < 8'//針對不同瀏覽器某些css屬性需要用到不同內核前綴(例:-webkit-transfrom,-moz-transfrom)
        ] 
    })
    }

 注:如果在postcss-plugins-px2rem插件中不想把font-size的屬性值轉換成rem(怕轉換后小數點值導致字體模糊),其值單位可以用rpx,rpx會被轉換成px單位。或者干脆單位PX大寫都可。

webpack use中的loader執行順序是從右到左倒序執行的,當前loader執行完當參數傳給下一個loader.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM