postcss使用

postcss安装

官网：https://www.postcss.com.cn/
介绍：postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具。postcss本身是一个功能比较单一的工具。它提供了一种方式用javascript代码来处理CSS。利用postcss可以实现一些工程化的操作，比如：自动添加浏览器前缀，代码合并，代码压缩等。

postcss的安装：
通过：npm安装
安装命令：
1.安装node环境
2.npm install postcss-cli -g
3.-o (用于转换) -w(用于监听)
4.postcss.confing.js（配置文件）

-o的用法：（以下面为例）
从创建一个postcss文件夹，包含src和dist文件夹。
src文件创建demo.css文件（dist不用）

在postcss目录中，启用cmd命令。
win10系统可以在地址栏输入cmd，即可进入当前路径。

输入之后就会弹出当前文件路径：

输入命令postcss src/demo.css -o dist/demo.css

postcss不能省略，否则会报错。
dist/后面的demo.css表示在通过转换，会在dist文件夹下生成demo.css。（文件名可以自己取）

打开dist下的demo.css，会有一串注释：

如果想要实现监听，可以通过

postcss src/demo.css -o dist/demo.css 后面添加 -w.

常用插件使用

1.autoprefixer :浏览器前缀
2.postcss-import：css样式合并
3.cssnano :对css进行压缩处理
4.postcss-cssnext：css样式降低，低版本的浏览器可以使用
5.stylelint :css语法规范提示
6.postcss-sprites ：自动合成精灵图

安装命令 （以安装autoprefixer为例）
1.在对应的项目打开cmd窗口。

2.输入命令cnpm i autoprefixer,安装成功后出现下面的提示：

3.在项目根目录下创建一个postcss.config.js文件（这里我们在src下创建）

4.打开postcss.config.js文件，导入插件

5.这样之后，src下的demo.css属性类似tranpostion属性，就有会自动添加浏览器前缀