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

1   npm install postcss  --save-dev

2 安装postcss-loader

1   npm install postcss-loader --save-dev

 

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

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

 1   rules: [
 2       {
 3          test: /\.css$/,
 4          exclude: /node_modules/,
 5          use: [
 6              {
 7                  loader: 'style-loader',
 8              },
 9              {
10                  loader: 'css-loader',
11                  options: {
12                       importLoaders: 1,
13                  }
14              },
15              {//*
16                  loader: 'postcss-loader'
17              }
18          ]
19      }
20 ]

 

常用的postcss插件：

 autoprefixer  前缀补全

 1     /*postcss-loader*/
 2     {
 3            loader: 'postcss-loader',
 4            options: {
 5                ident: 'postcss', // 表示下面的插件是对postcss使用的
 6                plugins: [ 
 7                 autoprefixer()   
 8               ]
 9           }
10     }

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

 postcss-pxtorem 把px转换成rem

 post的csssnano插件

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

     删除空格和最后一个分号

     删除注释

     优化字体权重

     丢弃重复的样式规则

     优化clac()

     压缩选择器

     减少手写属性

     合并规则

 

posted on 2022-02-24 11:21  zhishiyv  阅读(152)  评论(0)  编辑  收藏  举报

导航