npm工具之postcss

Posted 2020-10-16

postcss工具包是为了管理css文件：

 {
    loader: ‘postcss-loader‘,
    options:{
      plugins: [
        require(‘postcss-easy-import‘)({ prefix: ‘_‘ }), //文件名引入加前缀
         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(‘postcss-cssnext‘)({
         browsers:[
             ‘>0%‘,
             ‘last 4 versions‘,
             ‘Firefox ESR‘,　//postcss-cssnext兼容不同浏览器的，针对不同浏览器某些css属性需要用到不同内核前缀（例：-webkit-transfrom，-moz-transfrom)
   　　　　　  ‘not ie < 8‘, ] }), 
　　　　　　　　require(‘autoprefixer‘)
　　　　　　　　　] 
　　　　　} 
　　　 }