PostCSS

PostCSS是一个使用JS插件转换样式的工具。这些插件可以检查(lint)你的CSS，支持CSS Variables 和 Mixins，编译尚未浏览器广泛 支持的先进的CSS语法，内联图片，以及其他很多优秀的功能。

PostCSS 在工业界被广泛地应用

PostCSS 接收一个CSS文件并提供了一个API来分析、修改它的规则（通过把CSS规则转换成一个抽象语法树的方式）。在这之后，这个API便可被许多插件利用来做有用的事情。

常见的功能如下：

    1、使用下一代css语法

    2、自动补全浏览器前缀

    3、自动把px代码转换为rem

    4、css代码压缩等等

 

与less和sass不同，postcss既不是预处理器也不是后处理器，其功能比较广泛，而且重要的一点是，postcss可以和less、sass结合使用。

 

如何使用？

1安装postcss

  npm install postcss  --save-dev

2 安装postcss-loader

  npm install postcss-loader --save-dev

 

2、一般与其他loader配合使用，下面*标部分才是postcss应用部分

 （配合时注意loader的顺序，它是从下面开始加载）

  rules: [
      {
         test: /\.css$/,
         exclude: /node_modules/,
         use: [
             {
                 loader: 'style-loader',
             },
             {
                 loader: 'css-loader',
                 options: {
                      importLoaders: 1,
                 }
             },
             {//*
                 loader: 'postcss-loader'
             }
         ]
     }
]

 

常用的postcss插件：

 autoprefixer  前缀补全

    /*postcss-loader*/
    {
           loader: 'postcss-loader',
           options: {
               ident: 'postcss', // 表示下面的插件是对postcss使用的
               plugins: [ 
                autoprefixer()   
              ]
          }
    }

 postcss-cssnext   下一个版本的css语法

 postcss-pxtorem 把px转换成rem

 post的csssnano插件

      cssnano是一个非常强大的css优化的插件包，这个插件包是一个可以即插即用的，它汇集了大约25个插件， 只需要执行一个命令，就可以做多方面不同类型的优化。cssnano优化包括下面一些类型：

     删除空格和最后一个分号

     删除注释

     优化字体权重

     丢弃重复的样式规则

     优化clac()

     压缩选择器

     减少手写属性

     合并规则